Javascript: How to Make a new table row for each elament in an array?

Question

I have an array in javascript that contains names:

var names = ['JOHN', 'MIKE', 'SAM'];

I want to make an HTML table where each element in the array has its own row. Every time we insert an element in an array a new row with that name should be appended

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Grade</th> 
    <th>Roll</th>
  </tr>
  <tr>
    <td>JOHN</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>MIKE</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>SAM</td>
    <td></td>
    <td></td>
  </tr>
</table>
<script>
var names = ['JOHN', 'MIKE', 'SAM'];
</script>
</body>
</html>

`.createElement()` + (`.appendChild()` or `.append()` or `.insertBefore()` or `.insertAdjacentElement()` ) or `.insertAdjacentHTML()` or `.insertRow()` or `.append()` or ... — Andreas, Apr 22 '20 at 10:24
It might be useful [I found in others' question](https://stackoverflow.com/questions/14643617/create-table-using-javascript) — Lordke, Apr 22 '20 at 10:30

Maniraj Murugan · Accepted Answer · 2020-04-22T10:41:24.103

You could use the following to generate dynamic rows in a table..

Assign an id to the table and get the table element like,

const table = document.getElementById('table');

Then do forEach() on the array to iterate and generate dynamic rows accordingly like,

const tr = document.createElement('tr');

As there are three columns (based on th values) , so you can generate td's for the respective columns like,

const td1 = document.createElement('td');
const td2 = document.createElement('td');
const td3 = document.createElement('td');

Then to include the name comes from array, you can do it like,

const name = document.createTextNode(item);

Then you can append the name to first td like,

td1.appendChild(name);

Then you can append each element one by one accordingly.

Working Snippet:

const names = ['JOHN', 'MIKE', 'SAM', 'Another Name', 'Yet Another Name'];

const table = document.getElementById('table');

names.forEach((item,index) => {
    const tr = document.createElement('tr');   

    const td1 = document.createElement('td');
    const td2 = document.createElement('td');
    const td3 = document.createElement('td');

    const name = document.createTextNode(item);

    td1.appendChild(name);
    
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);

    table.appendChild(tr);
})

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<table style="width:100%" id="table">
  <tr>
    <th>Name</th>
    <th>Grade</th> 
    <th>Roll</th>
  </tr>
</table>
</body>
</html>

_"Every time we insert an element in an array a new row with that name should be appended"_ — Andreas, Apr 22 '20 at 10:33
@Andreas, It already works like that, See I have now added another two items to the array.. So there is also another two rows generated dynamically.. (Edited answer with addition of new items) .. — Maniraj Murugan, Apr 22 '20 at 10:35
For me this sounds like the update should on every `.push()` on that array. But as your _"accept the solution..."_ worked this seems not to be the case. — Andreas, Apr 22 '20 at 13:12
@Andreas The code works fine and that is exactly what I wanted. Why do you think the answer should not be accepted? Please elaborate. — Riwaj Chalise, Apr 24 '20 at 09:28

Javascript: How to Make a new table row for each elament in an array?

1 Answers1