Dynamically Update a Table in Javascript

Question

I have a table here and each cell within the table is an input field. I have a function to add a new row dynamically to the bottom of the table, but when I add the new row to the table it deletes the content of the input fields in the process. What's the proper way to do this? I'd like to be able to fill out the table dynamically and add rows as needed without deleting the contents of each cell in the process. Thanks in advance!

document.getElementById("btnAddItem").addEventListener("click", function () {
  numItems++;
  let template = `
  <tr>
  <td>
  <input type="text" id="itemDescription${numItems}" placeholder="Item" />
  </td>
  <td>
  <input type="text" id="itemValue${numItems}" placeholder="Value" />
  </td>
  </tr>
  `;

  table.innerHTML += template;
});

Machavity · Accepted Answer · 2021-04-24 15:48:01Z

2

You could try something like this

const table = document.getElementById('Table');
let numItems = 1;
document.getElementById("btnAddItem").addEventListener("click", function () {
    numItems++;
    const row = document.createElement('tr');
    row.innerHTML = `
  <td>
  <input type="text" id="itemDescription${numItems}" placeholder="Item" />
  </td>
  <td>
  <input type="text" id="itemValue${numItems}" placeholder="Value" />
  </td>`;
  // You could also do the same for the cells and inputs
    table.appendChild(row);
});

<button id="btnAddItem">Add</button>
<table id="Table">
</table>

edited Apr 24, 2021 at 15:48

Machavity♦

31.8k27 gold badges97 silver badges108 bronze badges

answered Apr 2, 2021 at 21:59

user3051780

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically Update a Table in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related