Html add and delete rows dynamically with javascript

Question

I want to have a table with no rows initially and after that to create each row dynamically and also to be able to delete every row. I got Cannot read property 'childNodes' of undefined Please let me know how it should be done, Thank you.

function addRow() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
}

function deleteRow(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];

      table.deleteRow(i);
      rowCount--;
      i--;
    }
  } catch (e) {
    alert(e);
  }
}

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <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>
  <br>

  <button type="button" onclick="addRow()">Add</button>
  <button type="button" onclick="deleteRow('myTable')">Delete</button>

</body>

</html>

Do you want to delete the first row every time when you click Delete button? — DecPK
– DecPK, Commented Jun 12, 2021 at 7:18
I want to delete each existing row when I click Delete.. so after to can update the table with new rows... — Cameron121341
– Cameron121341, Commented Jun 12, 2021 at 7:19
Why do you even have var chkbox = row.cells[0].childNodes[0];? it doesn't do anything except throw an error — Kinglish
– Kinglish, Commented Jun 12, 2021 at 7:20

Sanmeet · Accepted Answer · 2021-06-12 07:25:13Z

2

To delete all rows just remove the html from the table

function deleteRow(tableID) {
  let table =  document.getElementById(tableID)
   table.innerHTML = "";
}

answered Jun 12, 2021 at 7:25

Sanmeet

1,4201 gold badge10 silver badges18 bronze badges

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

1 Comment

Cameron121341 Over a year ago

why is not possible to add new rows to table after table.innerHTML = ""; ? my ultimate goal is to add new different rows with different buttons.. so when I click on a button I delete each row and after that I add the new ones...

caramba · Accepted Answer · 2021-06-12 07:33:04Z

The function deleteRow() looks misleading. As you pass the entire table to delete. So why not adding a button "Delete" to each row you create. If you want to delete all rows see the modification, I've changed your function deleteRow(tableID) to deleteAllTableRows(tableID)

function deleteThisRow() {
  this.closest('tr').remove()
}

function addRow() {
  /* create a span element ("Delete") with an event listener "deleteThisRow" */
  let deleteButton = document.createElement('span');
  deleteButton.innerHTML = 'Delete';
  deleteButton.addEventListener('click', deleteThisRow);
  
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell0 = row.insertCell(0);
  var cell1 = row.insertCell(1);
  var cell2 = row.insertCell(2);
  cell0.innerHTML = "NEW CELL1";
  cell1.innerHTML = "NEW CELL2";
  cell2.append(deleteButton); // add the "Delete" button to each row
}


function deleteAllTableRows(tableID) {
  var rows = document.querySelectorAll('#' + tableID + ' tr ')
  rows.forEach( row => { 
    row.remove()
  });
}

table,
td {
  border: 1px solid black;
}

<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"></table>
<br>

<button type="button" onclick="addRow()">Add</button>
<button type="button" onclick="deleteAllTableRows('myTable')">Delete all rows</button>

Hamed Ghorbani · Accepted Answer · 2021-06-12 07:39:10Z

1

The deleteRow() method removes the row at the specified index from a table. Maybe you should change

for (var i = 0; i < rowCount; i++) {
  table.deleteRow(0);;
}

answered Jun 12, 2021 at 7:39

Hamed Ghorbani

111 bronze badge

1 Comment

Cameron121341 Over a year ago

why is not possible to add new rows to table after table.innerHTML = ""; ? my ultimate goal is to add new different rows with different buttons.. so when I click on a button I delete each row and after that I add the new ones...

biberman · Accepted Answer · 2021-06-22 08:30:53Z

0

You can achieve it by simply changing your deleteRow() function like below. Whereas row.cells[0].childNodes[0] gives you error. row.cells[0] gives you HTML code, similar to like this - <td>NEW CELL1</td>. The childNode of that HTML does not have any information. So, always throws an error.

function addRow() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
}

function deleteRow(tableID) {
  document.getElementById(tableID).innerHTML = "";
}

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <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>
  <br>

  <button type="button" onclick="addRow()">Add</button>
  <button type="button" onclick="deleteRow('myTable')">Delete</button>

</body>
</html>

edited Jun 22, 2021 at 8:30

biberman

5,7804 gold badges16 silver badges39 bronze badges

answered Jun 12, 2021 at 7:48

Chandra Shekar

615 bronze badges

2 Comments

Cameron121341 Over a year ago

why is not possible to add new rows to table after table.innerHTML = ""; ? my ultimate goal is to add new different rows with different buttons.. so when I click on a button I delete each row and after that I add the new ones...

Chandra Shekar Over a year ago

Hi @Cameron121341, once you delete all rows in a table by clicking on a button, using table.innerHTML = "". You can add new rows again to the same table, above code works for this scenario. Please elaborate your question about this point "new different rows with different buttons"? If the above answer does not meet your requirements.

Inkeria · Accepted Answer · 2021-06-12 07:30:43Z

0

Maybe you should change

var chkbox = row.cells[0].childNodes[0];

into:

var chkbox = row.childNodes[0].childNodes[0];

answered Jun 12, 2021 at 7:30

Inkeria

1

Comments

Chaiya Tantisukarom · Accepted Answer · 2021-06-12 07:33:53Z

0

tableID.innerHTML=""; , is an easy way to clear all elements inside that table.
If the table is empty, there is no childNodes. Then it is undefined.

answered Jun 12, 2021 at 7:33

Chaiya Tantisukarom

511 silver badge5 bronze badges

1 Comment

Cameron121341 Over a year ago

why is not possible to add new rows to table after table.innerHTML = ""; ? my ultimate goal is to add new different rows with different buttons.. so when I click on a button I delete each row and after that I add the new ones...

Collectives™ on Stack Overflow

Html add and delete rows dynamically with javascript

6 Answers 6

1 Comment

Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related