[英]Input Javascript array into given HTML table
I am trying to append data from a Javascript array to a HTML table.我正在尝试将 append 数据从 Javascript 数组到 HTML 表。 I have tried appending the data with javascript/jquery, but I am not sure how to iterate through so that each number goes into each grid cell.
我尝试使用 javascript/jquery 附加数据,但我不确定如何迭代以便每个数字进入每个网格单元格。 I am trying to get the result to look like this (but without the header):
我试图让结果看起来像这样(但没有标题):
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>
Thank you for the help.感谢您的帮助。 I am new to learning Javascript and appreciate all the help.
我是学习 Javascript 的新手,感谢所有帮助。
Perhaps you can do something like this:也许你可以做这样的事情:
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++;
}
}
There are probably better ways to do this but this works if the table is empty.可能有更好的方法可以做到这一点,但如果表为空,则此方法有效。
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);
});
});
There are really numerous ways of doing this, here is two examples:确实有很多方法可以做到这一点,这里有两个例子:
You have 2 dimensional array, so you loop both dimensions:你有二维数组,所以你循环两个维度:
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
And you use你用
document.querySelector("table tr:nth-of-type(" + tr + ") td:nth-of-type(" + (td++) + ") input")
to target all inputs directly inside loop.直接在循环内定位所有输入。
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>
Or:或者:
Now you have one-liner:现在你有一个衬里:
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>
I do in in this way我这样做
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]
})
})
I prefer to use.forEach instead of.length, to prevent errors if the list does not have a length.我更喜欢使用.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.