开发者问题收集

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

2021-06-12
480
javascript html html-table dom-events innerhtml

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

Uncaught TypeError: Cannot set property 'innerHTML' of 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>
3个回答

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

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

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>
Spectric
2021-06-12

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

<button type="button" id="first" onclick="First('myTable', 'myTable2')">First</button>
Benliam12
2021-06-12

您是否尝试仅使用一个函数来编辑两个表格？这是该函数的一个版本。只需使用字符串传入表格的 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>
Kinglish
2021-06-12