从 HTML 表中删除一行时，如何存储单元格的值？
我有下表和 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回答
-
扬帆大鱼
您的代码大部分是正确的，只有一些错误：在阅读其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> -
陪伴而非守候
我会做不同的事情并将 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
随时随地看视频慕课网APP
相关分类
JavaScript