Html 使用 javascript 动态添加和删除行
Posted
技术标签:
【中文标题】Html 使用 javascript 动态添加和删除行【英文标题】：Html add and delete rows dynamically with javascript 【发布时间】：2021-08-28 22:55:18 【问题描述】：我希望有一个最初没有行的表，然后动态创建每一行并能够删除每一行。 我得到无法读取未定义的属性“childNodes” 请告诉我应该怎么做， 谢谢。
function addRow()
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerhtml = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
function deleteRow(tableID)
try
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++)
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
table.deleteRow(i);
rowCount--;
i--;
catch (e)
alert(e);
<!DOCTYPE html>
<html>
<head>
<style>
table,
td
border: 1px solid black;
</style>
</head>
<body>
<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>
<table id="myTable">
<TR>
</TR>
</table>
<br>
<button type="button" onclick="addRow()">Add</button>
<button type="button" onclick="deleteRow('myTable')">Delete</button>
</body>
</html>【问题讨论】：
每次点击Delete按钮时是否要删除第一行？
我想在单击删除时删除每个现有行。所以之后可以用新行更新表...
你为什么还有var chkbox = row.cells[0].childNodes[0];？除了抛出错误，它什么都不做
@Cameron121341 还是不清楚你到底想要什么？
【参考方案1】：
要删除所有行，只需从表中删除 html
function deleteRow(tableID)
let table = document.getElementById(tableID)
table.innerHTML = "";
【讨论】：
为什么不能在 table.innerHTML = "" 之后向表中添加新行； ?我的最终目标是使用不同的按钮添加新的不同行。所以当我单击一个按钮时，我会删除每一行，然后添加新的行...【参考方案2】：deleteRow() 函数看起来具有误导性。当您传递整个表以删除时。那么为什么不在您创建的每一行中添加一个“删除”按钮。如果要删除所有行，请参阅修改，我已将您的函数 deleteRow(tableID) 更改为 deleteAllTableRows(tableID)
function deleteThisRow()
this.closest('tr').remove()
function addRow()
/* create a span element ("Delete") with an event listener "deleteThisRow" */
let deleteButton = document.createElement('span');
deleteButton.innerHTML = 'Delete';
deleteButton.addEventListener('click', deleteThisRow);
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
cell0.innerHTML = "NEW CELL1";
cell1.innerHTML = "NEW CELL2";
cell2.append(deleteButton); // add the "Delete" button to each row
function deleteAllTableRows(tableID)
var rows = document.querySelectorAll('#' + tableID + ' tr ')
rows.forEach( row =>
row.remove()
);
table,
td
border: 1px solid black;
<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>
<table id="myTable"></table>
<br>
<button type="button" onclick="addRow()">Add</button>
<button type="button" onclick="deleteAllTableRows('myTable')">Delete all rows</button>【讨论】：
【参考方案3】：deleteRow() 方法从表中删除指定索引处的行。 也许你应该改变
for (var i = 0; i < rowCount; i++)
table.deleteRow(0);;
【讨论】：
为什么不能在 table.innerHTML = "" 之后向表中添加新行； ?我的最终目标是使用不同的按钮添加新的不同行。所以当我单击一个按钮时，我会删除每一行，然后添加新的行...【参考方案4】：您可以通过简单地更改您的 deleteRow() 函数来实现它，如下所示。而row.cells[0].childNodes[0] 给你错误。 row.cells[0] 为您提供 HTML 代码，类似于这样 - <td>NEW CELL1</td>。该 HTML 的 childNode 没有任何信息。所以，总是抛出错误。
function addRow()
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
function deleteRow(tableID)
document.getElementById(tableID).innerHTML = "";
<!DOCTYPE html>
<html>
<head>
<style>
table,
td
border: 1px solid black;
</style>
</head>
<body>
<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>
<table id="myTable">
<tr>
</tr>
</table>
<br>
<button type="button" onclick="addRow()">Add</button>
<button type="button" onclick="deleteRow('myTable')">Delete</button>
</body>
</html>【讨论】：
为什么不能在 table.innerHTML = "" 之后向表中添加新行； ?我的最终目标是使用不同的按钮添加新的不同行。所以当我单击一个按钮时，我会删除每一行，然后添加新的行... 嗨@Cameron121341，一旦您通过单击按钮删除表中的所有行，使用table.innerHTML = ""。您可以再次将新行添加到同一个表中，上面的代码适用于这种情况。请详细说明您对这一点“具有不同按钮的新不同行”的问题？如果以上答案不符合您的要求。【参考方案5】：也许你应该改变
var chkbox = row.cells[0].childNodes[0];
进入：
var chkbox = row.childNodes[0].childNodes[0];
【讨论】：
【参考方案6】：-
tableID.innerHTML=""; , 是清除该表中所有元素的简单方法。
如果表为空，则没有子节点。然后它是未定义的。
【讨论】：
为什么不能在 table.innerHTML = "" 之后向表中添加新行； ?我的最终目标是使用不同的按钮添加新的不同行。所以当我单击一个按钮时，我会删除每一行，然后添加新的行...以上是关于Html 使用 javascript 动态添加和删除行的主要内容，如果未能解决你的问题，请参考以下文章