Question

我有下表和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>

点击Delete Event按钮后，我想将数组中该行的id列中的内容存储起来。

deleteRow函数正确地从HTML表中删除了该行，但是由于tr.cell不是有效的函数而产生了错误。 如何存储DeletedIds数组中已删除行的ID列中的所有内容？

Answer 1

您的代码大部分都是正确的，只是有些错误：

要在读取元素的innerHTML之前将其删除。
tr.cells[i]是访问第ith列的正确方法。

查看以下工作片段。

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>

Answer 2

您可以执行以下操作。
1.调用该函数并向其发送元素（button）。
2.获取tr及其cells集合。
3.删除之前按入数组。

var deletedIds = [];

function deleteRow(el) {
  //var td = event.target.parentNode;
  var tr = el.parentNode.parentNode; // the row to be removed
  deletedIds.push({
    id: el.id,
    td0: tr.cells[0].innerHTML
  });
  tr.parentNode.removeChild(tr);
  console.log(deletedIds);
}

<!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' id='delete0' class='center2' onclick="deleteRow(this);"> Delete Event </button></TD>
    </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='delete1' class='center2' onclick="deleteRow(this);"> Delete Event </button></TD>
    </TR>
  </TABLE>

Answer 3

我会做不同的操作并将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 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 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 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(2)"> Delete Event</button>
           </TD>
        </TR>
      </TABLE>

从HTML表格中删除行后，如何存储单元格的值？

3 个答案: