Is there any way to add a <td> to each table row using javascript

Question

I want to add a <td> to every row when a button gets clicked with javascript but I want it to be a toggle button, when it gets clicked the second time it has to disappear again.

I tried doing a for loop on the children of the table tag but that adds a table row, i also tried giving them all the same class but that only adds the to the first element with that class.

This is where I add the table info

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();
};

Here I try to add a cell with an 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>';
    }
  });
};

A possible solution is to store your <td> in an array and then do a join, and add to the innerHTML, to add a new one just push it to the array — Robert
– Robert, Commented Jun 14, 2019 at 11:56

Radonirina Maminiaina · Accepted Answer · 2019-06-16 13:56:23Z

Use forEach to loop through your .js-tr, then create an element td set your svg as a child of your td, then append it to each of js-tr.

const tableRow = document.querySelectorAll('.js-tr');
tableRow.forEach(function (el) {
  const td = document.createElement('td');
  td.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>';
  el.appendChild(td);
})

Update: Here the snipcode with onclick event:

const tableRow = document.querySelectorAll('.js-tr');
tableRow.forEach(function (el) {
  const td = document.createElement('td');
  td.className = 'hidden';
  td.style.cursor = 'pointer';
  td.innerHTML = '<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>';
  el.appendChild(td);
  td.onclick = function () {
    if (this.classList.contains('hidden')) {
      this.classList.remove('hidden');
    } else {
      this.classList.add('hidden');
    }
  }
})

.hidden svg {
  opacity: 0;
  visibility: hidden;
}
.hidden {
  background-color: red;
}

<table>
  <tr class="js-tr">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

But is there any way to make a toggle button from this code, i want to show the svg and <td> when it has been clicked once, but the second time I want to hide it again

Collectives™ on Stack Overflow

Is there any way to add a <td> to each table row using javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related