有没有办法使用javascript向每个表行添加一个 <td>

Question

我想在<td>使用 javascript 单击按钮时向每一行添加一个，但我希望它是一个切换按钮，当它第二次被单击时它必须再次消失。

我尝试在 table 标记的子项上执行 for 循环，但是添加了一个 table 行，我也尝试给它们所有相同的类，但只将 the 添加到该类的第一个元素。

这是我添加表格信息的地方

const verwerkDatatable = function(data) {

  console.log(data);

  const table = document.querySelector('.js-table');

  table.innerHTML = `<tr class="js-table-header">

  <td>Naam:</td>

  <td>Toevoegdatum:</td>

  <td>Vervaldatum:</td>

  <td>Aantal:</td>

</tr>`;

  for (let object of data) {

    const amount = object.amount;

    const name = object.name;

    const addDate = object.date;

    const exDate = object.expirationDate;

    table.innerHTML += `<tr class="js-tr">

  <td>${name}</td>

  <td>${addDate}</td>

  <td>${exDate}</td>

  <td>${amount}</td>

</tr>`;

  }

  listenToTrash();

};

在这里，我尝试添加一个带有 SVG 的单元格

const listenToTrash = function() {

  const trash = document.querySelector('.js-trash');

  trash.addEventListener('click', function() {

    const tableHeader = document.querySelector('.js-table-header');

    tableHeader.innerHTML = `<tr class="js-table-header">

    <td>Naam:</td>

    <td>Toevoegdatum:</td>

    <td>Vervaldatum:</td>

    <td>Aantal:</td>

    <td>Verwijderen:</td>

  </tr>`;

    const tableRow = document.querySelectorAll('.js-tr');

    console.log(tableRow)

    for (row of tableRow){

    tableRow.innerHTML +=

      '<td> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 8v16h18v-16h-18zm5 12c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.552.448-1 1-1s1 .448 1 1v8zm5 0c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.552.448-1 1-1s1 .448 1 1v8zm5 0c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.552.448-1 1-1s1 .448 1 1v8zm4-15.375l-.409 1.958-19.591-4.099.409-1.958 5.528 1.099c.881.185 1.82-.742 2.004-1.625l5.204 1.086c-.184.882.307 2.107 1.189 2.291l5.666 1.248z"/></svg></td>';

    }

  });

};