如何使用while循环将数组值插入到HTML表中？

时间：2017-12-24 12:19:08

标签： javascript html arrays while-loop html-table

我正在尝试将数组放在带有while循环的HTML表格中，但它不起作用，我不知道它是如何工作的。我必须将名字放在第二个td。

中

＆＃13;
＆＃13; 
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++;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

仅从每行中选择第二个单元格并迭代它们

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

答案 1 :(得分：0)

应该是

document.getElementById(id).innerHTML = text。

  • 使用 JavaScript 创建表格行。

  • 表格行的长度是数组的长度。

  • 分隔<thead></thead>和<tbody></tbody>。

示例 

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>

<强>提示

答案 2 :(得分：0)

我同时使用两个答案尝试编译它，因为它现在可以两步工作了

首先绘制行和列，然后在其中填充数据，这样看起来更好。并且还需要这种方式

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>

相关问题
最新问题