How to insert a row in an HTML table body in JavaScript ?

Last Updated On Sunday 27th Mar 2022

javascript add a row to the table

	var object = object.insertRow(index);
	

Parameters

index

Integer that specifies where to insert the row in the rows collection. The default value is -1, which appends the new row to the end of the rows group.

It uses the insertRow method to add a row to the table.

	myNewRow = document.all.myTable.insertRow()
	

Remarks

  • The preferred technique for inserting a row is to add the row at the end of the rows collection.
  • It is faster to add a row at the end of a table than somewhere in the middle.
  • To add a row at the end of the collection, specify the -1 value or the length of the rows collection minus 1.

body row

	<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Job</th>
        </tr>
    </thead>
    <tbody id="table">
        <!-- Your table rows will go here -->
    </tbody>
</table>
	
  • First, we create a tbody variable. It grabs the tbody element with the table ID.
  • So we can talk to it later when we want to add our table rows to it.
	var tbody = document.getElementById('table');
	
	var datas = [
    {
        "name": "Adam",
        "job": "Accountant"
    },{
        "name": "Olivia",
        "job": "Magician"
    },{
        "name": "Oliver",
        "job": "Dentist"
    },{
        "name": "Ava",
        "job": "Teacher"
    }
];
	

We Use forEach loop for that

	datas.forEach(function(data) {
 // Do Something
});
	

Then we create another variable, tableRow. It creates a new line for each person.

	var tableRow = tbody.insertRow(-1);
	

Use for loop within a forEach loop !
And this one looks different because instead of looping through items in a list
This time, we’re looping through the attributes within our object.

	for (i in data) {
    var tableCell = tableRow.insertCell(-1);
    tableCell.innerHTML = data[i];
}
	
  • That (-1) is just special to this particular insertCell() method and means that we want the table cell to be added to the end.
  • This is something I’d never seen before and had to Google. We’re learning together!

Here’s the complete Code

	var tbody = document.getElementById('table');

datas.forEach(function(data) {
    var tableRow = tbody.insertRow(-1);
    for (i in data) {
        var tableCell = tableRow.insertCell(-1);
        tableCell.innerHTML = data[i];
    }
})