將 Javascript 數組輸入到給定的 HTML 表中

Question

我正在嘗試將 append 數據從 Javascript 數組到 HTML 表。 我嘗試使用 javascript/jquery 附加數據，但我不確定如何迭代以便每個數字進入每個網格單元格。 我試圖讓結果看起來像這樣（但沒有標題）：

1	2	3
4	5	6

 var array = [ [1, 2, 3], [4, 5, 6] ];

 <table id = "table"> <tr> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> </tr> <tr> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> </tr>

感謝您的幫助。 我是學習 Javascript 的新手，感謝所有幫助。

Answer 1

也許你可以做這樣的事情：

const elements = document.getElementsByClassName("grid");
let idx = 0;
for (var i = 0; i < array.length; i++){
     for (var j = i; j < array[i].length; j++){
       elements[idx].innerHTML = array[i][j];
       idx++;
    }
}

Answer 2

可能有更好的方法可以做到這一點，但如果表為空，則此方法有效。

  var tbl = document.getElementById('table')

  var array = [
    [1, 2, 3],
    [4, 5, 6]
  ];

  array.forEach(function (rowData) {   
    var row =  tbl.insertRow();
    rowData.forEach(function (cellData) {
      var cell = row.insertCell();
      cell.setAttribute('class', 'grid');
      cell.appendChild(document.createTextNode(cellData));
      row.append(cell);
    });
  });

Answer 3

確實有很多方法可以做到這一點，這里有兩個例子：

1. 你有二維數組，所以你循環兩個維度：

   array.forEach(arr => { // this will loop both dimensions and we will target tr element

   arr.forEach(num => { // this will loop all 3 numbers and we will target td elements

你用

document.querySelector("table tr:nth-of-type(" + tr + ") td:nth-of-type(" + (td++) + ") input")

直接在循環內定位所有輸入。

 var array = [ [1, 2, 3], [4, 5, 6] ]; let tr = 1; let td = 1; array.forEach(arr => { arr.forEach(num => { document.querySelector("table tr:nth-of-type(" + tr + ") td:nth-of-type(" + (td++) + ") input").value = num; }); tr++; td = 1; })

 <table id="table"> <tr> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> </tr> <tr> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> </tr>

或者：

2. 您使用flat()制作一維數組，並且對於每個值只需循環輸入 +1

現在你有一個襯里：

array.flat().forEach( arr => document.querySelectorAll('.grid[type="number"]')[num++].value=arr)

 var array = [ [1, 2, 3], [4, 5, 6] ]; let num = 0 array.flat().forEach( arr => document.querySelectorAll('.grid[type="number"]')[num++].value=arr)

 <table id="table"> <tr> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> </tr> <tr> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> </tr>

Answer 4

我這樣做

    let array = [
        [1, 2, 3],
        [4, 5, 6]
    ];
    
    const table = document.querySelector('#table');
    const tableRows = table.rows
    //Convert HTMLCollection to Array and run forEach
    Array.from(tableRows).forEach((row,rowIndex)=>{
        const tableCells = row.cells
        Array.from(tableCells).forEach((cell,cellIndex)=>{
            cell.childNodes[0].value = array[rowIndex][cellIndex]
        })
    })

Answer 5

我更喜歡使用.forEach 而不是.length，以防止列表沒有長度時出錯。

 var array = [ [1, 2, 3], [4, 5, 6] ]; const $table = document.querySelector('#table'); array.forEach((a, i) => { a.forEach((o, n) => { $table.rows[i].cells[n].childNodes[0].value = o; }); });

 <table id="table"> <tr> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> </tr> <tr> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> <td><input class="grid" type="number"> </td> </tr> </table>