Javascript add table rows dynamically

what you will learn here about javascript dynamic operations on the table

1. javascript add table rows dynamically
2. javascript delete row from table dynamically
3. javascript change table cell value
4. javascript change table cell background color

Please download the following code and unzip the downloaded code to know how to perform different operations on the table from javascript.
download javascript table operation code (596 downloads)

Javascript add table rows dynamically

Assuming you have downloaded above code to know how to perform different operations on the table from javascript

Add first row to table from javascript

Please double click on downloaded unzipped code to run the code. In the downloaded code following part adds the row to first position from the javascript.

var td=document.getElementById("tableData");
var row=td.insertRow(1);

  var column1 = row.insertCell(0);
  var column2 = row.insertCell(1);
  var column3 = row.insertCell(2);
  
  column1.innerHTML = "NEW NAME";
  column2.innerHTML = "NEW PLACE";
  column3.innerHTML = "NEW COUNTRY"; 

Add last row to table from javascript

In the downloaded code following part adds the row to last position from the javascript.

var td=document.getElementById("tableData");
var row=td.insertRow(-1);

  var column1 = row.insertCell(0);
  var column2 = row.insertCell(1);
  var column3 = row.insertCell(2);
  
  column1.innerHTML = "NEW NAME";
  column2.innerHTML = "NEW PLACE";
  column3.innerHTML = "NEW COUNTRY";

Javascript delete row from table dynamically

Delete first row to table from javascript

In the downloaded code following part deletes the first row of table from the javascript.

document.getElementById("tableData").deleteRow(1);

Delete last row to table from javascript

In the downloaded code following part deletes the last row of table from the javascript.

document.getElementById("tableData").deleteRow(-1);

javascript change table cell value

In the downloaded code following part update or change the table cell value from javascript.

document.getElementById("tableData").rows[1].cells[0].innerHTML = "UPDATED NAME";

javascript change table cell background color

In the downloaded code following part change the table cell background color from javascript.

document.getElementById("tableData").rows[2].cells[1].style.backgroundColor = "green";
document.getElementById("tableData").rows[2].cells[1].style.color = "white";