## 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>
<tr>
<th>Name</th>
<th>Job</th>
</tr>
<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 = [
{
"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];
}
})