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

Question

我想使用 JavaScript 在 html 中操作两个 table 行（add/delete 行）。一个有效，但如果我添加第二个，我会收到此错误：

Uncaught TypeError: Cannot set property 'innerHTML' of null

更准确地说：我想要两个 table，每个根据单击的按钮具有不同的内容。

用一个 table 就可以了。第一个函数删除了table内容->添加了新内容。第二个功能相同，从第一个 table 中删除了内容 -> 添加了新内容。

但我想用两个 table 来做到这一点。请告诉我应该怎么做。

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

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

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

Answer 2

如果您不将 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 3

您是否尝试仅使用一个功能来编辑两个 table？这是一个版本。只需用字符串传入 table 的 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>

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

How to manipulate two tables with onclick method in JavaScript

html

javascript

html-table

innerhtml

dom-events