求动态生成如图的表格JS代码,谢谢 http://hi.csdn.net/space-1214146-do-album-picid-510251-goto-down.html求生成如上地址的表格图片的JS代码,谢谢 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 图片地址:http://hi.csdn.net/attachment/201004/6/1214146_1270557724iq2q.jpg 说错了。 全部用JS生成? 还是说用JS生成数据 <style> input {width:50px; border:1px solid #BBCCFF;} td {font-size:12px; text-align:center;} </style> <TABLE id="tab1" border="1" bordercolor="#CCCCCC" style="border-collapse:collapse;"> <TR bgcolor="#FFEEDD"> <TD rowspan="2">楼层</TD> <TD>单元号</TD> <TD colspan="2"><INPUT TYPE="text" NAME="" value="1"><FONT SIZE="" COLOR="red">*</FONT></TD> <TD colspan="3"><INPUT TYPE="text" NAME="" value="2"><FONT SIZE="" COLOR="red">*</FONT></TD> </TR> <TR bgcolor="#FFEEDD"> <TD>室号</TD> <TD><INPUT TYPE="text" NAME="" value="01"><BR><select><option>请选择...<option></select></TD> <TD><INPUT TYPE="text" NAME="" value="02"><BR><select><option>请选择...<option></select></TD> <TD><INPUT TYPE="text" NAME="" value="01"><BR><select><option>请选择...<option></select></TD> <TD><INPUT TYPE="text" NAME="" value="02"><BR><select><option>请选择...<option></select></TD> <TD><INPUT TYPE="text" NAME="" value="03"><BR><select><option>请选择...<option></select></TD> </TR> </TABLE> <BODY> <SCRIPT LANGUAGE="JavaScript"> var tab = document.getElementById("tab1"); for (var i=0; i<3; i++) { var newRow = tab.insertRow(2); for (var j=0; j<=tab.rows[1].cells.length; j++) { var newCell = newRow.insertCell(); if (j==0){ newCell.bgColor = "#FFEEDD"; newCell.innerHTML = '<INPUT TYPE="text" NAME="" value="'+ (i+1) +'">'; } else { var num = i.toString() + ( j.length > 1 ? j : "0"+j ); newCell.innerHTML = '<a href="#">'+ num +'</a><BR>请设置户型'; } } } </SCRIPT> 这次好像对了 <style> input {width:50px; border:1px solid #BBCCFF;} td {font-size:12px; text-align:center;} </style> <TABLE id="tab1" border="1" bordercolor="#CCCCCC" style="border-collapse:collapse;"> <TR bgcolor="#FFEEDD"> <TD rowspan="2">楼层</TD> <TD>单元号</TD> <TD colspan="2"><INPUT TYPE="text" NAME="" value="1"><FONT COLOR="red">*</FONT></TD> <TD colspan="3"><INPUT TYPE="text" NAME="" value="2"><FONT COLOR="red">*</FONT></TD> </TR> <TR bgcolor="#FFEEDD"> <TD>室号</TD> <TD><INPUT TYPE="text" NAME="" value="01"><BR><select><option>请选择...<option></select></TD> <TD><INPUT TYPE="text" NAME="" value="02"><BR><select><option>请选择...<option></select></TD> <TD><INPUT TYPE="text" NAME="" value="01"><BR><select><option>请选择...<option></select></TD> <TD><INPUT TYPE="text" NAME="" value="02"><BR><select><option>请选择...<option></select></TD> <TD><INPUT TYPE="text" NAME="" value="03"><BR><select><option>请选择...<option></select></TD> </TR> </TABLE> <BODY> <SCRIPT LANGUAGE="JavaScript"> var tab = document.getElementById("tab1"); for (var i=0; i<3; i++) { var newRow = tab.insertRow(2); for (var j=0; j<tab.rows[1].cells.length; j++) { var newCell = newRow.insertCell(); if (j==0){ newCell.bgColor = "#FFEEDD"; newCell.colSpan = "2"; newCell.innerHTML = '<INPUT TYPE="text" NAME="" value="'+ (i+1) +'"><FONT COLOR="red">*</FONT>'; } else { var room = tab.rows[1].cells[j].firstChild.value; var num = (i+1).toString() + room; newCell.innerHTML = '<a href="#">'+ num +'</a><BR>请设置户型'; } } } </SCRIPT> 是WEB的,其中单元号,楼层和室号 都是动态输出的,都是不固定的 表格是根据这个图生成的http://hi.csdn.net/attachment/201004/9/1214146_1270817476Eu6F.jpg这个表格上的单元名称和单元户数也是动态生成的,就是到第二步就要产生现在所需要的JS动态表了 <style> input {width:50px; border:1px solid #BBCCFF;} td,th {font-size:12px; text-align:center;} </style> <fieldset style="width:300px"> <legend style="font-size:12px">基本信息</legend> <TABLE> <TR> <TD>楼层数</TD> <TD><INPUT TYPE="text" NAME="floor" id="floor" value="3"></TD> <TD>单元数</TD> <TD><INPUT TYPE="text" NAME="unit" id="unit" onchange="setRoom(this.value)"></TD> </TR> </TABLE> <TABLE id="tab1" border=1> <TR> <Th>单元名称</Th> <Th>单元户数</Th> </TR> </TABLE> </fieldset> <INPUT TYPE="button" VALUE="生成明细表" ONCLICK="doHead()" style="width:100px;margin:10px;border:3px outset #EEE"><BR> <TABLE id="tab2" border="1" bordercolor="#CCCCCC" style="border-collapse:collapse;"> </TABLE> <BODY> <SCRIPT LANGUAGE="JavaScript"> var tab1 = document.getElementById("tab1"); var tab = document.getElementById("tab2"); var floor = document.getElementById("floor"); var unit = document.getElementById("unit"); var rooms = document.getElementsByName("room"); //生成单元户数表 function setRoom(unitNum){ //删除原表数据 for (var i=tab1.rows.length-1; i>0; i--) { tab1.deleteRow(i); } for (var i=0; i<parseInt(unitNum,10); i++) { var newrow = tab1.insertRow(); var newcell = newrow.insertCell(); newcell.innerHTML = (i+1)+"单元"; var newcell = newrow.insertCell(); newcell.innerHTML = '<INPUT TYPE="text" NAME="room" value="2">'; } } //生成明细表表头 function doHead(){ if (floor.value == "" || unit.value == "") { alert("请先填写楼层数和单元数!"); return; } var newrow = tab.insertRow(); var newrow2 = tab.insertRow(); newrow.bgColor = newrow2.bgColor = "#FFEEDD"; var newcell = newrow.insertCell(); newcell.rowSpan = "2"; newcell.innerHTML = "楼层"; var newcell = newrow.insertCell(); newcell.innerHTML = "单元号"; var newcell = newrow2.insertCell(); newcell.innerHTML = "室号"; for (var i=0; i<parseInt(unit.value,10); i++) { //第一行的单元号 var newcell = newrow.insertCell(); newcell.colSpan = rooms[i].value; newcell.innerHTML = '<INPUT TYPE="text" NAME="" value="'+ (i+1) +'"><FONT COLOR="red">*</FONT>'; //第二行的室号 for (var j=0; j<parseInt(room[i].value,10); j++) { var num = (j+1).length > 1 ? j+1 : "0"+(j+1); var newcell = newrow2.insertCell(); newcell.innerHTML = '<INPUT TYPE="text" NAME="" value="'+ num +'"><BR><select><option>请选择...<option></select>'; } } doRows(); } //生成明细表数据行 function doRows() { for (var i=0; i<parseInt(floor.value,10); i++) { var newRow = tab.insertRow(2); for (var j=0; j<tab.rows[1].cells.length; j++) { var newCell = newRow.insertCell(); if (j==0){ newCell.bgColor = "#FFEEDD"; newCell.colSpan = "2"; newCell.innerHTML = '<INPUT TYPE="text" NAME="" value="'+ (i+1) +'"><FONT COLOR="red">*</FONT>'; } else { var room = tab.rows[1].cells[j].firstChild.value; var num = (i+1).toString() + room; newCell.innerHTML = '<a href="#">'+ num +'</a><BR>请设置户型'; } } } } </SCRIPT> 生成表头函数里有一点小问题//第二行的室号for (var j=0; j<parseInt(room[i].value,10); j++)这里应该是rooms[i]就对了因为HTML中的input也叫room,所以在IE中没出问题 这段代码有什么不兼容其他浏览器的地方吗 web应用中,需要根据(省+市+路名地址)判断出 所在“区县” HyperLink控件中的NavigateUrl如何转接到外网www.163.com, jquery根据class来选取对应的<input> checkbox自动选择问题 javascript 递归中断问题,请教高手 怎样写一个某一单元格的tooltip 可以对隐藏的域进行控制吗? 怎樣從form中抓取對象值 急切 如何得到一个iframe里面的页面高度和宽度 哪位大哥看看这个js 怎么写啊?String 转数组问题 根据浏览器的语言选择不同的页面
<style>
input {width:50px; border:1px solid #BBCCFF;}
td {font-size:12px; text-align:center;}
</style>
<TABLE id="tab1" border="1" bordercolor="#CCCCCC" style="border-collapse:collapse;">
<TR bgcolor="#FFEEDD">
<TD rowspan="2">楼层</TD>
<TD>单元号</TD>
<TD colspan="2"><INPUT TYPE="text" NAME="" value="1"><FONT SIZE="" COLOR="red">*</FONT></TD>
<TD colspan="3"><INPUT TYPE="text" NAME="" value="2"><FONT SIZE="" COLOR="red">*</FONT></TD>
</TR>
<TR bgcolor="#FFEEDD">
<TD>室号</TD>
<TD><INPUT TYPE="text" NAME="" value="01"><BR><select><option>请选择...<option></select></TD>
<TD><INPUT TYPE="text" NAME="" value="02"><BR><select><option>请选择...<option></select></TD>
<TD><INPUT TYPE="text" NAME="" value="01"><BR><select><option>请选择...<option></select></TD>
<TD><INPUT TYPE="text" NAME="" value="02"><BR><select><option>请选择...<option></select></TD>
<TD><INPUT TYPE="text" NAME="" value="03"><BR><select><option>请选择...<option></select></TD>
</TR>
</TABLE> <BODY>
<SCRIPT LANGUAGE="JavaScript">
var tab = document.getElementById("tab1");
for (var i=0; i<3; i++)
{
var newRow = tab.insertRow(2);
for (var j=0; j<=tab.rows[1].cells.length; j++)
{
var newCell = newRow.insertCell();
if (j==0){
newCell.bgColor = "#FFEEDD";
newCell.innerHTML = '<INPUT TYPE="text" NAME="" value="'+ (i+1) +'">';
}
else {
var num = i.toString() + ( j.length > 1 ? j : "0"+j );
newCell.innerHTML = '<a href="#">'+ num +'</a><BR>请设置户型';
}
}
}
</SCRIPT>
input {width:50px; border:1px solid #BBCCFF;}
td {font-size:12px; text-align:center;}
</style>
<TABLE id="tab1" border="1" bordercolor="#CCCCCC" style="border-collapse:collapse;">
<TR bgcolor="#FFEEDD">
<TD rowspan="2">楼层</TD>
<TD>单元号</TD>
<TD colspan="2"><INPUT TYPE="text" NAME="" value="1"><FONT COLOR="red">*</FONT></TD>
<TD colspan="3"><INPUT TYPE="text" NAME="" value="2"><FONT COLOR="red">*</FONT></TD>
</TR>
<TR bgcolor="#FFEEDD">
<TD>室号</TD>
<TD><INPUT TYPE="text" NAME="" value="01"><BR><select><option>请选择...<option></select></TD>
<TD><INPUT TYPE="text" NAME="" value="02"><BR><select><option>请选择...<option></select></TD>
<TD><INPUT TYPE="text" NAME="" value="01"><BR><select><option>请选择...<option></select></TD>
<TD><INPUT TYPE="text" NAME="" value="02"><BR><select><option>请选择...<option></select></TD>
<TD><INPUT TYPE="text" NAME="" value="03"><BR><select><option>请选择...<option></select></TD>
</TR>
</TABLE> <BODY>
<SCRIPT LANGUAGE="JavaScript">
var tab = document.getElementById("tab1");
for (var i=0; i<3; i++)
{
var newRow = tab.insertRow(2);
for (var j=0; j<tab.rows[1].cells.length; j++)
{
var newCell = newRow.insertCell();
if (j==0){
newCell.bgColor = "#FFEEDD";
newCell.colSpan = "2";
newCell.innerHTML = '<INPUT TYPE="text" NAME="" value="'+ (i+1) +'"><FONT COLOR="red">*</FONT>';
}
else {
var room = tab.rows[1].cells[j].firstChild.value;
var num = (i+1).toString() + room;
newCell.innerHTML = '<a href="#">'+ num +'</a><BR>请设置户型';
}
}
}
</SCRIPT>
http://hi.csdn.net/attachment/201004/9/1214146_1270817476Eu6F.jpg
这个表格上的单元名称和单元户数也是动态生成的,就是到第二步就要产生现在所需要的JS动态表了
<style>
input {width:50px; border:1px solid #BBCCFF;}
td,th {font-size:12px; text-align:center;}
</style>
<fieldset style="width:300px">
<legend style="font-size:12px">基本信息</legend>
<TABLE>
<TR>
<TD>楼层数</TD>
<TD><INPUT TYPE="text" NAME="floor" id="floor" value="3"></TD>
<TD>单元数</TD>
<TD><INPUT TYPE="text" NAME="unit" id="unit" onchange="setRoom(this.value)"></TD>
</TR>
</TABLE>
<TABLE id="tab1" border=1>
<TR>
<Th>单元名称</Th>
<Th>单元户数</Th>
</TR>
</TABLE>
</fieldset> <INPUT TYPE="button" VALUE="生成明细表" ONCLICK="doHead()" style="width:100px;margin:10px;border:3px outset #EEE">
<BR>
<TABLE id="tab2" border="1" bordercolor="#CCCCCC" style="border-collapse:collapse;">
</TABLE> <BODY>
<SCRIPT LANGUAGE="JavaScript">
var tab1 = document.getElementById("tab1");
var tab = document.getElementById("tab2"); var floor = document.getElementById("floor");
var unit = document.getElementById("unit");
var rooms = document.getElementsByName("room");
//生成单元户数表
function setRoom(unitNum){
//删除原表数据
for (var i=tab1.rows.length-1; i>0; i--)
{
tab1.deleteRow(i);
}
for (var i=0; i<parseInt(unitNum,10); i++)
{
var newrow = tab1.insertRow();
var newcell = newrow.insertCell();
newcell.innerHTML = (i+1)+"单元";
var newcell = newrow.insertCell();
newcell.innerHTML = '<INPUT TYPE="text" NAME="room" value="2">';
}
}
//生成明细表表头
function doHead(){
if (floor.value == "" || unit.value == "")
{
alert("请先填写楼层数和单元数!");
return;
}
var newrow = tab.insertRow();
var newrow2 = tab.insertRow();
newrow.bgColor = newrow2.bgColor = "#FFEEDD";
var newcell = newrow.insertCell();
newcell.rowSpan = "2";
newcell.innerHTML = "楼层";
var newcell = newrow.insertCell();
newcell.innerHTML = "单元号";
var newcell = newrow2.insertCell();
newcell.innerHTML = "室号";
for (var i=0; i<parseInt(unit.value,10); i++)
{
//第一行的单元号
var newcell = newrow.insertCell();
newcell.colSpan = rooms[i].value;
newcell.innerHTML = '<INPUT TYPE="text" NAME="" value="'+ (i+1) +'"><FONT COLOR="red">*</FONT>';
//第二行的室号
for (var j=0; j<parseInt(room[i].value,10); j++)
{
var num = (j+1).length > 1 ? j+1 : "0"+(j+1);
var newcell = newrow2.insertCell();
newcell.innerHTML = '<INPUT TYPE="text" NAME="" value="'+ num +'"><BR><select><option>请选择...<option></select>';
}
}
doRows();
}
//生成明细表数据行
function doRows() {
for (var i=0; i<parseInt(floor.value,10); i++)
{
var newRow = tab.insertRow(2);
for (var j=0; j<tab.rows[1].cells.length; j++)
{
var newCell = newRow.insertCell();
if (j==0){
newCell.bgColor = "#FFEEDD";
newCell.colSpan = "2";
newCell.innerHTML = '<INPUT TYPE="text" NAME="" value="'+ (i+1) +'"><FONT COLOR="red">*</FONT>';
}
else {
var room = tab.rows[1].cells[j].firstChild.value;
var num = (i+1).toString() + room;
newCell.innerHTML = '<a href="#">'+ num +'</a><BR>请设置户型';
}
}
}
}
</SCRIPT>
for (var j=0; j<parseInt(room[i].value,10); j++)这里应该是rooms[i]就对了
因为HTML中的input也叫room,所以在IE中没出问题