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

【问题标题】：Dynamically add/remove rows from html table从 html 表中动态添加/删除行
【发布时间】：2015-01-28 03:32:22
【问题描述】：

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

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

<!DOCTYPE html>
<html>
<head>
<script>
function deleteRow(id,row) {
    document.getElementById(id).deleteRow(row);
}

function insRow(id) {
    var filas = document.getElementById("myTable").rows.length;
    var x = document.getElementById(id).insertRow(filas);
    var y = x.insertCell(0);
    var z = x.insertCell(1);
    y.innerHTML = '<input type="text" id="fname">';
    z.innerHTML ='<button id="btn" name="btn" > Delete</button>';
}
</script>
</head>
<body>

<table id="myTable" style="border: 1px solid black">
<tr>
  <td><input type="text" id="fname"></td>
  <td><input type="button" value="Delete" onclick="deleteRow('myTable',0)"></td>
</tr>
<tr>
  <td><input type="text" id="fname"></td>
  <td><input type="button" value="Delete" onclick="deleteRow('myTable',1)"></td>
</tr>
<tr>
  <td><input type="text" id="fname"></td>
  <td><input type="button" value="Delete" onclick="deleteRow('myTable',2)"></td>
</tr>
</table>
  
 <p>
<input type="button" onclick="insRow('myTable')" value="Insert row">
</p>
</body>
</html>

但我无法将函数 onclick="deleteRow('myTable',0)" 附加到

z.innerHTML ='<button id="btn" name="btn"> Delete</button>'

¿我是否需要声明其他内容才能使该按钮在单击时起作用？

感谢您的回答

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

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

其次，如果你使用的是 jQuery，那么就使用 jQuery。

第三，动态添加元素时需要使用事件委托，可以尝试以下方法：

$('#myTable').on('click', 'input[type="button"]', function () {
    $(this).closest('tr').remove();
})
$('p input[type="button"]').click(function () {
    $('#myTable').append('<tr><td><input type="text" class="fname" /></td><td><input type="button" value="Delete" /></td></tr>')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable" style="border: 1px solid black">
    <tr>
        <td>
            <input type="text" class="fname" />
        </td>
        <td>
            <input type="button" value="Delete" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" class="fname" />
        </td>
        <td>
            <input type="button" value="Delete" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" class="fname" />
        </td>
        <td>
            <input type="button" value="Delete" />
        </td>
    </tr>
</table>
<p>
    <input type="button" value="Insert row">
</p>

【讨论】：

谢谢。我正在寻找一种避免使用 javascript 部分的方法，因为我正在使用谷歌应用程序服务，但我发现如果我将第一部分放在第二部分的末尾并用包围，则代码可以工作很好！

【解决方案2】：

在每个 DeleteRow(tableId,Index) 函数上，您传递表 ID 和静态索引，这就是为什么 document.getElementById("mytable").deleteRow(Index) 首先找到表节点然后找到没有 tr 元素作为子元素并将索引分配给从 0 开始的 tr 元素并删除匹配的索引 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>

和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 示例

Click Here

【讨论】：

【解决方案3】：

假设你有下表：

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

下面的 jquery 代码将生成 x 个用户输入的行并将它们附加到表的底部，如果需要可以删除它们：

$('#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>")        
    }

});

当单击“删除”按钮时，以下 jquery 代码将删除行：

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

【讨论】：

【解决方案4】：

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>

【讨论】：