2

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>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Matthijs Hulshof
  • 25
  • 1
  • 5
  • Explain in what way it doesn't work. – Alan Dec 24 '17 at 12:27
  • give every name column an id( "naam0","naam1",..) and use `document.getElementById("naam"+nummer).innerHTML(naam[nummer])`. and use nummer < 20 – Turo Dec 24 '17 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 Dec 24 '17 at 12:30
  • refer this ans: https://stackoverflow.com/questions/18333427/how-to-insert-row-in-html-table-body-in-javascript – Soham Nakhare Dec 24 '17 at 12:50
  • please accept an answer if one of the questions solved your problem. – Junius L Dec 24 '17 at 15:00

3 Answers3

1

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

An0num0us
  • 961
  • 7
  • 15
1

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

Community
  • 1
  • 1
0

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>
Puneet Sharma
  • 307
  • 3
  • 9