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];
    }
})