如何使用文本框动态添加表行？

Question

我有一个表,其中每行包含4个单元格,默认情况下每个单元格包含一个文本框.我只有一行和一个按钮,允许我每次单击时添加一行.

如何在Javascript中动态添加包含文本框的表行？

我还想让他们的文本框ID改变:

<input type="text" id="txtbox1" />
<input type="text" id="txtbox2" />

现在,我有添加单元格的代码:

JavaScript的:

<script type="text/javascript">
    function insertRow(){
                var table=document.getElementById("tbSibling");
                var row=table.insertRow(2);
                var cell1=row.insertCell(0);
                var cell2=row.insertCell(1);
                var cell3=row.insertCell(2);
                var cell4=row.insertCell(3);
    }
</script>

桌子:

<table id="myTable">
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
        <th>Occupation and Employer</th>
        <th>Add</th>
        <tr>
            <td><input type="text" id="txtName" /></td>
            <td><input type="text" id="txtAge" /></td>
            <td><input type="text" id="txtGender" /></td>
            <td><input type="text" id="txtOccupation" /></td>
            <td id="btnAdd" class="button-add" onclick="insertRow();">add</td>
        </tr>
</table>

Answer 1

通过使用纯JavaScript,检查这个,这就是你想要的. 的jsfiddle

var index = 1;
function insertRow(){
            var table=document.getElementById("myTable");
            var row=table.insertRow(table.rows.length);
            var cell1=row.insertCell(0);
            var t1=document.createElement("input");
                t1.id = "txtName"+index;
                cell1.appendChild(t1);
            var cell2=row.insertCell(1);
            var t2=document.createElement("input");
                t2.id = "txtAge"+index;
                cell2.appendChild(t2);
            var cell3=row.insertCell(2);
            var t3=document.createElement("input");
                t3.id = "txtGender"+index;
                cell3.appendChild(t3);
            var cell4=row.insertCell(3);
            var t4=document.createElement("input");
                t4.id = "txtOccupation"+index;
                cell4.appendChild(t4);
      index++;

}