Я хочу манипулировать (добавлять / удалять строки) для двух таблиц в html с помощью JavaScript. С одним он работает, но если я добавлю второй, я получаю эту ошибку:

Uncaught TypeError: Невозможно установить свойство '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>
3
Cameron121341 12 Июн 2021 в 23:14

3 ответа

Лучший ответ

Если вы не заключите myTable и myTable2 в кавычки, JavaScript предполагает, что это объект. Поскольку вы не определили ни myTable, ни myTable2, они являются null. Вы не можете изменить innerHTML для null, и поэтому вы получите ошибку «Не удается установить свойство 'innerHTML' равным нулю».

В приведенном ниже примере имена заключены в кавычки, что делает его String:

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>
0
Spectric 12 Июн 2021 в 20:28

Просто добавьте кавычки в аргументы при вызове функции. В противном случае javascript считает, что «myTable» - это переменная, которой не существует.

<button type="button" id="first" onclick="First('myTable', 'myTable2')">First</button>
0
Benliam12 12 Июн 2021 в 20:23

Вы пытались использовать только одну функцию для редактирования обеих таблиц? Вот версия этого. Просто передайте идентификатор таблицы в виде строки.

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>
0
Kinglish 12 Июн 2021 в 20:30