如何使用文本框动态添加表格行？ [英] How to dynamically add a table row with textbox?

问题描述

我有一个表，每行包含4个单元格，每个单元格默认包含一个文本框
。我只有一行和一个按钮，允许我在每次点击时添加一个附加行。

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

我也想改变他们的文本框ID：

  input type =textid =txtbox1/> 
< input type =textid =txtbox2/> 
  

现在，我有代码添加单元格：

JavaScript：

 < script type =text / javascript> 
函数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>年龄< / th> 
< th>性别< / th> 
< th>职业和雇主< / th> 
< th>添加< / th> 
< tr> 
< td>< input type =textid =txtName/>< / td> 
< td>< input type =textid =txtAge/>< / td> 
< td>< input type =textid =txtGender/>< / td> 
< td>< input type =textid =txtOccupation/>< / td> 
< td id =btnAddclass =button-addonclick =insertRow（）;> add< / td> 
< / tr> 
< / table> 
  

解决方案

检查这个，这是你想要的，通过使用纯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 ++; 
 
} 
  

I have a table where each row contains 4 cells and each cell contains a textbox by default. I have only 1 row and a button that allows me to add an additional row every time it's clicked.

How do I dynamically add table rows containing textboxes in Javascript?

I would also like to have their textbox id change:

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

Right now, I have code that adds the cells:

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>

The Table:

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

解决方案

Check with this, it's all you want, by using pure 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++;

}

这篇关于如何使用文本框动态添加表格行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！