我有下表和 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 lang="en">
<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>单击删除事件按钮后，我想将该行的 id 列中的所有内容存储在数组中。
deleteRow 函数可以正确地从 HTML 表中删除该行，但会产生错误，因为 tr.cell 不是有效的函数。 如何将已删除行的 ID 列中的任何内容存储在deletedIds 数组中？
最佳答案
您的代码大部分是正确的，只有一些错误:
- 您将在读取元素的 insideHTML 之前删除该元素。
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>关于javascript - 从 HTML 表格中删除行后如何存储单元格的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56419977/