http://hi.csdn.net/space-1214146-do-album-picid-510251-goto-down.html求生成如上地址的表格图片的JS代码,谢谢

解决方案 »

  1.   

    图片地址:http://hi.csdn.net/attachment/201004/6/1214146_1270557724iq2q.jpg
      

  2.   

    说错了。  全部用JS生成?   还是说用JS生成数据
      

  3.   


      <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>
      

  4.   

    这次好像对了  <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>
      

  5.   

    是WEB的,其中单元号,楼层和室号 都是动态输出的,都是不固定的
      

  6.   

    表格是根据这个图生成的
    http://hi.csdn.net/attachment/201004/9/1214146_1270817476Eu6F.jpg
    这个表格上的单元名称和单元户数也是动态生成的,就是到第二步就要产生现在所需要的JS动态表了
      

  7.   


      <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>
      

  8.   

    生成表头函数里有一点小问题//第二行的室号
    for (var j=0; j<parseInt(room[i].value,10); j++)这里应该是rooms[i]就对了
    因为HTML中的input也叫room,所以在IE中没出问题