如何在 JavaScript 中使用 onclick 方法操作两个表

Question

我想使用 JavaScript 为 html 中的两个表操作（添加/删除行）。一个它可以工作，但如果我添加第二个，我会收到这个错误：

未捕获的类型错误：无法将属性“innerHTML”设置为 null

更准确地说：我希望有两个表，每个表都有不同的内容，具体取决于单击的按钮。

一张桌子就可以了。第一个函数删除了表格内容 -> 添加了新内容。第二个功能相同，从第一个表中删除内容 -> 添加了新内容。

但我想用两张桌子来做这件事。请告诉我应该怎么做。

function First(tableID, tableID2) {

  let table = document.getElementById(tableID)
  table.innerHTML = ""; // here is the mentioned error.

  // I would like to have something like..
  // let table2 =  document.getElementById(tableID2)
  // table2.innerHTML = ""; 
}

<p>Click the button to add a new row at the first position of the table and then add cells and content</p>

<table id="myTable">
  <TR>
  </TR>
</table>
<table id="myTable2">
  <TR>
  </TR>
</table>
<br>

<button type="button" id="first" onclick="First(myTable, myTable2)">First</button>
<button type="button" id="second" onclick="Second(myTable, myTable2)">Second</button>

Answer 1

如果您不将 myTable 和 myTable2 括在引号中，JavaScript 会假定它是一个对象。由于您没有定义myTable 或myTable2，它们是null。您无法修改null 的innerHTML，因此您会收到错误“无法设置属性'innerHTML' of null”。

在下面的示例中，名称用引号括起来，使其成为字符串：

function First(tableID, tableID2) {

  let table = document.getElementById(tableID)
  table.innerHTML = "<tr>first</tr>"; // here is the mentioned error.
  let table2 = document.getElementById(tableID2)
  table2.innerHTML = "<tr>first again</tr>";
}

function Second(tableID, tableID2) {
  let table = document.getElementById(tableID)
  table.innerHTML = "<tr>second</tr>"; // here is the mentioned error.
  let table2 = document.getElementById(tableID2)
  table2.innerHTML = "<tr>second again</tr>";
}

<p>Click the button to add a new row at the first position of the table and then add cells and content</p>

<table id="myTable">
  <TR>
  </TR>
</table>
<table id="myTable2">
  <TR>
  </TR>
</table>
<br>

<button type="button" id="first" onclick="First('myTable', 'myTable2')">First</button>
<button type="button" id="second" onclick="Second('myTable', 'myTable2')">Second</button>

或者，您可以在两个变量被引用之前定义它们：

function First(tableID, tableID2) {

  let table = document.getElementById(tableID)
  table.innerHTML = "<tr>first</tr>"; // here is the mentioned error.
  let table2 = document.getElementById(tableID2)
  table2.innerHTML = "<tr>first again</tr>";
}

function Second(tableID, tableID2) {
  let table = document.getElementById(tableID)
  table.innerHTML = "<tr>second</tr>"; // here is the mentioned error.
  let table2 = document.getElementById(tableID2)
  table2.innerHTML = "<tr>second again</tr>";
}

<p>Click the button to add a new row at the first position of the table and then add cells and content</p>

<table id="myTable">
  <TR>
  </TR>
</table>
<table id="myTable2">
  <TR>
  </TR>
</table>
<br>
<script>
  var myTable = 'myTable';
  var myTable2 = 'myTable2';
</script>
<button type="button" id="first" onclick="First(myTable, myTable2)">First</button>
<button type="button" id="second" onclick="Second(myTable, myTable2)">Second</button>

Answer 2

调用函数时，只需在参数上添加一些引号即可。否则，javascript 认为“myTable”是一个不存在的变量。

<button type="button" id="first" onclick="First('myTable', 'myTable2')">First</button>

Answer 3

您是否尝试仅使用一个函数来编辑两个表？这是一个版本。只需用字符串传入表的ID即可。

function eTable(tableID) {
  let table = document.getElementById(tableID)
  let row = table.insertRow(0);
  let cell = row.insertCell(0);
  cell.innerHTML = "New cell for " + tableID;
}

<p>Click the button to add a new row at the first position of the table and then add cells and content</p>
Table 1:
<table id="myTable">
  <TR>
  </TR>
</table>
Table 2:
<table id="myTable2">
  <TR>
  </TR>
</table>
<br>
<button type="button" id="first" onclick="eTable('myTable')">First</button>

<button type="button" id="second" onclick="eTable('myTable2')">Second</button>