CODEWITHSUNDEEP
javascripthtmlarrayswhile-loophtml-table
Matthijs Hulshof
Matthijs Hulshof

Reputation: 25

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

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>

Upvotes: 2

Views: 7622

Answers (3)

Puneet Sharma
Puneet Sharma

Reputation: 317

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>

Upvotes: 0

user3589620
user3589620

Reputation:

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

Upvotes: 1

An0num0us
An0num0us

Reputation: 961

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

Upvotes: 1

Related Questions