Javascript 从html表中动态添加/删除行

我正在处理一个表格，可以通过按每行中的“删除”按钮和“插入行”在末尾添加一个新的按钮来修改该表格：

到目前为止，我的代码是：

函数deleteRow（id，行）{
document.getElementById（id）.deleteRow（row）；
}
行内函数（id）{
var filas=document.getElementById（“myTable”）.rows.length；
var x=document.getElementById（id）.insertRow（filas）；
变量y=x.insertCell（0）；
var z=x.insertCell（1）；
y、 innerHTML=''；
z、 innerHTML='Delete'；
}

首先，ID必须是唯一的，所以为什么不在这里使用类呢

第二，如果您使用jQuery，那么就使用jQuery

第三，动态添加元素时需要使用事件委派，因此请尝试以下操作：

$（'#myTable'）。在（'click'，'input[type=“button”]”上，函数（）{
$（this）.closest（'tr'）.remove（）；
})
$（'p input[type=“button”]”）。单击（函数（）{
$（'#myTable'）。附加（''）
});


在每个
DeleteRow（tableId，Index）
函数上，您都在传递表id和静态索引，这就是为什么
document.getElementById（“mytable”）.DeleteRow（Index）
首先查找表节点，然后查找作为子元素的tr元素的编号，并将索引从0开始分配给tr元素，然后删除匹配的Index tr元素

无论何时删除第一行，它都将匹配3个元素中的0索引，并删除第一行。现在剩下2个tr，索引0和1由表动态分配，但您试图与1和2匹配

对于删除第二行，它将删除索引为1的tr（第三个tr），而不是第二个tr

对于删除第三行，实际索引是0（删除2行之后），并且您正在传递1，因为它找不到匹配的索引

下面是简单的javascript解决方案

<script>

function delRow(currElement) {
     var parentRowIndex = currElement.parentNode.parentNode.rowIndex;
     document.getElementById("myTable").deleteRow(parentRowIndex);
}

</script>


函数delRow（currElement）{
var parentRowIndex=currElement.parentNode.parentNode.rowIndex；
document.getElementById（“myTable”）.deleteRow（parentRowIndex）；
}

和html

<table id="myTable" style="border: 1px solid black">
<tr>
  <td><input type="text" id="fname"></td>
  <td><input type="button" value="Delete" onclick="delRow(this)"></td>
</tr>
<tr>
  <td><input type="text" id="fname"></td>
  <td><input type="button" value="Delete" onclick="delRow(this)"></td>
</tr>
<tr>
  <td><input type="text" id="fname"></td>
  <td><input type="button" value="Delete" onclick="delRow(this)"></td>
</tr>
</table>



这里是jsfiddle示例

假设您有下表：

<table id="myTable">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" name="firstName" /></td>

                        <td><input type="text" name="lastName" /></td>

                        <td> <input type="text" name="email" /></td>                            
                    </tr>                       
                </tbody>
                <p>
                    <label>Insert</label>
                    <input type="number" value="1" id="numberOfRowsToInsert">
                    <input type="button" value="Insert row" id="insert-line-button">
                </p>
</table>

查看以下代码：
您可以看到，这是创建动态表的最基本方法。您可以使用这种方法，也可以尝试从现有表中删除行。我没有使用任何pluggin/jquery。您只需复制此代码并另存为html文件即可查看此代码的工作方式。快走！祝你好运
函数CreateTableAndRows（）{
var mybody=document.getElementsByTagName（“body”）[0]；
var newTable=document.createElement（“表”）；
var newTableHead=document.createElement（“thead”）；
var headlow=document.createElement（“tr”）；
var head1=document.createElement（“th”）；
var headlowcellvalue=document.createTextNode（“设备名称”）；
headHead1.appendChild（HeadLowCellValue）；
var head2=document.createElement（“th”）；
headLowCellValue=document.createTextNode（“开始计时”）；
headHead2.appendChild（HeadLowCellValue）；
var head3=document.createElement（“th”）；
headLowCellValue=document.createTextNode（“结束计时”）；
headHead3.appendChild（HeadLowCellValue）；
var head4=document.createElement（“th”）；
headLowCellValue=document.createTextNode（“持续时间”）；
headHead4.appendChild（HeadLowCellValue）；
头枕。附肢儿童（头1）；
头枕。附肢儿童（头枕2）；
头枕。附肢儿童（头3）；
头枕。附肢儿童（头4）；
新胎头。新胎（头下）；
newTable.appendChild（newTableHead）；
var newTableBody=document.createElement（“tbody”）；
for（var rowCount=0；rowCount谢谢。我正在寻找一种避免使用javascript部分的方法，因为我正在使用google apps服务，但我发现如果我将第一部分放在第二部分的末尾，并用代码包围，效果会很好！
$('#insert-line-button').on("click", function(){
    var noOfRows = $('#numberOfRowsToInsert').val();
    for(var i = 0; i < noOfRows; i++){
        $('#myTable').append("<tr>" +
                "<td><input type='text' name='firstName' /></td>" +
                "<td><input type='text' name='lastName' /></td>" +
                "<td> <input type='text' name='email' /></td>" +
                "<td><input type='button' value='Delete' id='deleteRowButton' /></td>" +
                "</tr>")        
    }

});

$("#myTable").on('click', 'input[id="deleteRowButton"]', function(event) {
    $(this).parent().parent().remove();
});

Go through below code:
You can see that this is the most basic way to create dynamic table. You can use this approach and can try yourself to remove rows from the existing table. I have not used any pluggin/ jquery. You can just copy this code and save as an html file to see how this code is working. Go head! Good luck.


    <html>
        <script>
        function CreateTableAndRows(){
            var mybody = document.getElementsByTagName("body")[0];
            var newTable = document.createElement("table"); 
            var newTableHead = document.createElement("thead");
            var headRow = document.createElement("tr");     
            var headHead1 = document.createElement("th");
            var headRowCellValue = document.createTextNode("Device Name");
            headHead1.appendChild(headRowCellValue);
            var headHead2 = document.createElement("th");   
            headRowCellValue = document.createTextNode("Start Timing");
            headHead2.appendChild(headRowCellValue);
            var headHead3 = document.createElement("th");   
            headRowCellValue = document.createTextNode("End Timing");
            headHead3.appendChild(headRowCellValue);
            var headHead4 = document.createElement("th");   
            headRowCellValue = document.createTextNode("Duration");
            headHead4.appendChild(headRowCellValue);
            headRow.appendChild(headHead1);
            headRow.appendChild(headHead2);
            headRow.appendChild(headHead3);
            headRow.appendChild(headHead4);
            newTableHead.appendChild(headRow);
            newTable.appendChild(newTableHead);     
            var newTableBody = document.createElement("tbody");
            for(var rowCount=0;rowCount<5;rowCount++)
            {
                var newTableRow = document.createElement("tr");         
                for(var cellCount=0; cellCount<4; cellCount++)
                {
                    var newTableRowCell = document.createElement("td");
                    var cellValue = document.createTextNode("cell is row"+rowCount+", coumn "+cellCount);
                    newTableRowCell.appendChild(cellValue);
                    newTableRow.appendChild(newTableRowCell);
                }
                newTableBody.appendChild(newTableRow);
            }
            newTable.appendChild(newTableBody);
            newTable.setAttribute("border","2");
            mybody.appendChild(newTable);
        }    
   </script>
   </head>
   <body>
    <input type="submit" onclick="CreateTableAndRows();">
   </body>
  </html>