时间戳

首页 > 解决方案 > 从 HTML 表中删除一行后，如何存储单元格的值？

javascript - 从 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 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();’&gt; Delete Event </button></TD>
        </TR>
      </TABLE>

单击Delete Event按钮后，我想将该行的 id 列中的任何内容存储在数组中。

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

标签： javascripthtml

解决方案

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

  1. 在读取它的 innerHTML 之前，您正在删除该元素。
  2. 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>

推荐阅读