Question

我需要一个接一个地动态创建表。所以我创建了一个表（外部），并尝试在按钮单击时动态生成列。在每个列中，我将创建我需要的实际表（内部），以便它们最终并排显示。

但是我坚持为更大的表创建列。看看代码，它会很清楚。 JS中的任何解决方案都表示赞赏提前致谢

<html>
    <head>
        <script type="text/javascript">    
            function add() {
                var table = document.getElementById('foo');
                var rowCount = table.rows.length;             
                var row =document.getElementById('rowl');         
                var max=table.rows[0].cells.length;
                var cnum;

                if(max==0){
                    cnum=0;
                }else{
                    cnum=max+1;
                }

                var cell1 = row.insertCell(cnum);             

                cell1.innerHTML = "<table id='tabl'"+
                    cnum+
                    "' border=2 bordercolor='RED'><tr><th>Material  "+
                    (cnum+1)+
                    "</th></tr><tr><td>bdfgher</td></tr><tr><td>fdgerh</td></tr></table>"; 
                }
        </script>
    </head>
    <body>
        <button type="button" onclick="add()">Add cell</button>
        <table id="foo" border=1 bordercolor="BLUE">
            <tr id="rowl"></tr>
        </table>
    </body>
</html>

Answer 1

var cell = document.createElement("td");
document.getElementById("rowl").appendChild(cell);

当然，您应该在单元格元素中添加其他元素（内部表）。

Answer 2

它可能对你有所帮助:)）

<html>
<head>
<script>
var c=-1;
function displayResult()
{
var firstRow=document.getElementById("tr_1");
//var x=firstRow.insertCell(-1);
//x.innerHTML="New cell"
var cell1 = firstRow.insertCell(c++);             

                cell1.innerHTML = "<table id='tabl'"+
                    cnum+
                    "' border=2 bordercolor='RED'><tr><th>Material  "+
                    (cnum+1)+
                    "</th></tr><tr><td>bdfgher</td></tr><tr><td>fdgerh</td></tr></table>";
}
</script>
</head>
<body>

<table id="myTable" border="1">
  <tr id='tr_1'></tr>
</table>
<br>
<button type="button" onclick="displayResult()">Insert cell</button>

</body>
</html>

需要动态生成列

2 个答案: