How to insert array values into a HTML table with a while loop?

Question

I am trying to put an array in a HTML table with a while loop but it doesn't work and I don't know how it will work. I have to put the names in the second td.

var nummer = 0;
var naam = ["Chris Froome", "Rigoberto Urán", "Romian Bardet", "Mikel Landa", "Fabio Aru", "Daniel Martin", "Simon Yates", "Louis Meintjes", "Alberto Contador", "Warren Barguil", "Damiano Caruso", "Nairo Quintana", "Alexis Vuillemonz", "Mikel Nieve", "Emanuel Buchmann", "Brice Feilu", "Bauke Millema", "Carlos Betancur", "Serge Pauwels", "Tiesj Benoot"];

while (nummer <= 20) {
  document.getElementById("naam").innerHTML(naam[0]);
  nummer++;
}

<div id="tabel">
  <table>
    <tr>
      <td>#</td>
      <td>Naam</td>
      <td>Team</td>
      <td>Tijd</td>
    </tr>
    <tr>
      <td></td>
      <td id="naam"></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

give every name column an id( "naam0","naam1",..) and use document.getElementById("naam"+nummer).innerHTML(naam[nummer]). and use nummer < 20 — Turo
– Turo, Commented Dec 24, 2017 at 12:29
You are continuously over writing the innerHTML "Or trying to". You are also always accessing the first element in the array by using [0]. Not the method I would use but document.getElementById("naam").innerHTML+=naam[nummer ]; should fix your current problem — NewToJS
– NewToJS, Commented Dec 24, 2017 at 12:30
please accept an answer if one of the questions solved your problem. — Junius L
– Junius L, Commented Dec 24, 2017 at 15:00

An0num0us · Accepted Answer · 2017-12-24 12:51:57Z

Select only the second cell from each row and iterate over them

let names = ["Chris Froome", "Rigoberto Urán", "Romian Bardet", "Mikel Landa", "Fabio Aru", "Daniel Martin", "Simon Yates", "Louis Meintjes", "Alberto Contador", "Warren Barguil", "Damiano Caruso", "Nairo Quintana", "Alexis Vuillemonz", "Mikel Nieve", "Emanuel Buchmann", "Brice Feilu", "Bauke Millema", "Carlos Betancur", "Serge Pauwels", "Tiesj Benoot"];
let cells = document.querySelectorAll('table tr td:nth-child(2)');
for(let i = 0; i < cells.length; ++i) {
    cells[i].innerHTML = names[i];
}

let names = ["Chris Froome", "Rigoberto Urán", "Romian Bardet", "Mikel Landa", "Fabio Aru", "Daniel Martin", "Simon Yates", "Louis Meintjes", "Alberto Contador", "Warren Barguil", "Damiano Caruso", "Nairo Quintana", "Alexis Vuillemonz", "Mikel Nieve", "Emanuel Buchmann", "Brice Feilu", "Bauke Millema", "Carlos Betancur", "Serge Pauwels", "Tiesj Benoot"];
let cells = document.querySelectorAll('table tr td:nth-child(2)');
for (let i = 0; i < cells.length; ++i) {
  cells[i].innerHTML = names[i];
}

<div id="tabel">
  <table border="1">
    <tr>
      <th>#</th>
      <th>Naam</th>
      <th>Team</th>
      <th>Tijd</th>
    </tr>
    <tr>
      <td></td>
      <td id="naam"></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

JsFiddle Demo

Community · Accepted Answer · 2020-06-20 09:12:55Z

It should be

document.getElementById(id).innerHTML = text.

Create the table rows with JavaScript.
The length of the table rows is the length of the array.
Separate <thead></thead> and <tbody></tbody>.

Example

var naam = ["Chris Froome", "Rigoberto Urán", "Romian Bardet", "Mikel Landa", "Fabio Aru", "Daniel Martin", "Simon Yates", "Louis Meintjes", "Alberto Contador", "Warren Barguil", "Damiano Caruso", "Nairo Quintana", "Alexis Vuillemonz", "Mikel Nieve", "Emanuel Buchmann", "Brice Feilu", "Bauke Millema", "Carlos Betancur", "Serge Pauwels", "Tiesj Benoot"],
  cols = document.querySelector("#tabel > table > thead > tr").children.length, // Get length of the columns in thead
  tbody = document.querySelector("#tabel > table > tbody");
for (var i = 0; i < naam.length; i += 1) {
  var row = tbody.insertRow(i);
  for (var j = 0; j < cols; j += 1) {
    var cell = row.insertCell(j);
    if (j === 1) { // Second td
      var text = document.createTextNode(naam[i]);
      cell.appendChild(text);
    }
  }
}

table {
  border: 1px solid;
}

th,
td {
  border: 1px solid;
  min-width: 100px;
}

<div id="tabel">
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Naam</th>
        <th>Team</th>
        <th>Tijd</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

Hints

Puneet Sharma · Accepted Answer · 2020-10-28 14:12:09Z

i use both answer try to compile it as now it work in 2 step

first it draw row and column and then fill data in it it look better that way. and also needed that in that way

var names = ["Chris Froome", "Rigoberto Urán", "Romian Bardet", "Mikel Landa", "Fabio Aru", "Daniel Martin", "Simon Yates", "Louis Meintjes", "Alberto Contador", "Warren Barguil", "Damiano Caruso", "Nairo Quintana", "Alexis Vuillemonz", "Mikel Nieve", "Emanuel Buchmann", "Brice Feilu", "Bauke Millema", "Carlos Betancur", "Serge Pauwels", "Tiesj Benoot"];
var cols = document.getElementById("hea").children.length;

var tbody = document.getElementById("roww");
for (let i = 0; i < names.length; ++i) {
  var row = tbody.insertRow(); //create row
  var obj = [];
  for (var j = 0; j < cols; ++j) {
    obj.push(row.insertCell(j));//create cell & add array
  }
  obj[1].innerHTML = names[i]; //enter detail to cell
}

<div id="tabel">
  <table border="1">
  <thead>
    <tr id="hea">
      <th>#</th>
      <th>Naam</th>
      <th>Team</th>
      <th>Tijd</th>
    </tr>
    </thead>
    <tbody id="roww">
    </tbody>
  </table>
</div>

Collectives™ on Stack Overflow

How to insert array values into a HTML table with a while loop?

3 Answers 3

Comments

Example

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Example

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related