我有下表和 JavaScript 代码：function deleteRow() { var td = event.target.parentNode; var tr = td.parentNode; // the row to be removed tr.parentNode.removeChild(tr); deletedIds.push(tr.cell(0).innerHTML);}<!DOCTYPE html> <html> <body> <TABLE id="eventTable" border="1" style="border: 1px solid #000000; border-collapse: collapse;" cellpadding="4"> <TR> <TH>ID</TH> <TH>Timestamp</TH> <TH>Filename</TH> <TH>Frequency</TH> <TH>Hostname</TH> <TH>Port</TH> <TH>Band</TH> <TH>Start Time</TH> <TH>End Time</TH> <TH>Delete</TH> </TR> <TR> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"> <button type='button' value='delete' 'class='center2 ' onclick=‘deleteRow();’> Delete Event </button></TD> </TR> </TABLE>单击Delete Event按钮后，我想将该行的 id 列中的任何内容存储在数组中。该deleteRow函数正确地从 HTML 表中删除该行，但由于tr.cell不是有效函数而产生错误。 如何将已删除行的 ID 列中的内容存储在 deletedIds 数组中？
3 回答
扬帆大鱼
TA贡献1799条经验 获得超9个赞
您的代码大部分是正确的，只有一些错误：
在阅读其innerHTML 之前，您正在删除该元素。
tr.cells[i]是访问第 i 列的正确方法。
查看以下工作片段。
var deletedIds = [];
function deleteRow() {
var td = event.target.parentNode;
var tr = td.parentNode; // the row to be removed
//deletedIds is the name of the array
deletedIds.push(tr.cells[0].innerHTML);
tr.parentNode.removeChild(tr);
console.log(deletedIds);
}
<TABLE id="eventTable" border="1" style="border: 1px solid #000000; border-collapse: collapse;" cellpadding="4">
<TR>
<TH>ID</TH>
<TH>Timestamp</TH>
<TH>Filename</TH>
<TH>Frequency</TH>
<TH>Hostname</TH>
<TH>Port</TH>
<TH>Band</TH>
<TH>Start Time</TH>
<TH>End Time</TH>
<TH>Delete</TH>
</TR>
<TR>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true">
<button type="button" id="delete0" onclick="deleteRow()"> Delete Event </button></TD>
</TR>
</TABLE>
陪伴而非守候
TA贡献1757条经验 获得超8个赞
我会做不同的事情并将 id 应用到行 - 然后将其存储在删除中，即： - tr.attr('id')
var deletedIds = [];
function deleteRow(index) {
var rows = document.querySelectorAll('#eventTable tr');
rows.forEach(function(row){
let id = row.getAttribute('id');
if (id == index) {
deletedIds.push(id);
row.parentNode.removeChild(row);
}
})
console.log(deletedIds);
}
<!DOCTYPE html>
<html>
<body>
<TABLE id="eventTable" border="1" style="border: 1px solid #000000; border-collapse: collapse;" cellpadding="4">
<TR>
<TH>ID</TH>
<TH>Timestamp</TH>
<TH>Filename</TH>
<TH>Frequency</TH>
<TH>Hostname</TH>
<TH>Port</TH>
<TH>Band</TH>
<TH>Start Time</TH>
<TH>End Time</TH>
<TH>Delete</TH>
</TR>
<TR id="1">
<TD contenteditable="true">1</TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true">
<button type='button' class='center2 ' onclick="deleteRow(1)"> Delete Event</button>
</TD>
</TR>
<TR id="2">
<TD contenteditable="true">2</TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD contenteditable="true"></TD>
<TD
添加回答
举报
0/150
提交
取消