如何使用while循環將數組值插入到HTML表格中？

Question

我試圖將一個數組放入帶有 while 循環的 HTML 表中，但它不起作用，我不知道它將如何工作。 我必須把名字放在第二個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>

Answer 1

僅選擇每行中的第二個單元格並對其進行迭代

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 演示

Answer 2

應該是

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>

提示

• 插入單元（）

• 插入行（）

• 數組長度

Answer 3

我使用這兩個答案嘗試編譯它，因為現在它分兩步工作

首先它繪制行和列，然后在其中填充數據，這樣看起來更好。 並且也需要那樣

 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>