我想使用JavaScript函数从数组制作html表。我想使用循环函数来做到这一点,但是我在努力寻找如何将数组循环到html表的方法。我想在三个不同的栏中分别输入人名,年龄和课程名称,但是我正在努力寻找一种方法来实现这一目标。
这是我的代码:
function array5() {
var table_content = [
["Tom", 20, "Science"],
["Tommy", 25, "Maths"],
["Fred", 22, "English"],
["Teddy", 20, "English"],
["Ted", 21, "Dance"],
["Tim", 22, "Maths"]
];
//???
}
您可以遍历数组并按如下所示使用insertRow
和insertCell
方法:
var table_content = [
["Tom", 20, "Science"],
["Tommy", 25, "Maths"],
["Fred", 22, "English"],
["Teddy", 20, "English"],
["Ted", 21, "Dance"],
["Tim", 22, "Maths"]
];
var table = document.getElementById("myTable");
for(var i = 0; i < table_content.length; i++){
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = table_content[i][0]
cell2.innerHTML = table_content[i][1]
cell3.innerHTML = table_content[i][2]
}
<table id="myTable"></table>
function array5() {
var table_content = [
["Tom", 20, "Science"],
["Tommy", 25, "Maths"],
["Fred", 22, "English"],
["Teddy", 20, "English"],
["Ted", 21, "Dance"],
["Tim", 22, "Maths"]
];
document.querySelector('table').innerHTML = table_content.map( item => `<tr><td>${item[0]}</td><td>${item[1]}</td><td>${item[2]}</td></tr>` ).join('\n');
}
array5();
<table></table>
您可以遍历数组并按如下所示使用insertRow和insertCell方法:
const myTable = document.getElementById('my-table')
, table_content =
[ [ 'Tom', 20, 'Science']
, [ 'Tommy', 25, 'Maths' ]
, [ 'Fred', 22, 'English']
, [ 'Teddy', 20, 'English']
, [ 'Ted', 21, 'Dance' ]
, [ 'Tim', 22, 'Maths' ]
]
for (let row of table_content)
{
let xRow = myTable.insertRow()
for( let cell of row)
{
xRow.insertCell().textContent = cell
}
}
table {
border-collapse: collapse;
margin: 1em;
}
td {
border: 1px solid grey;
padding: .5em ;
height: 1em;
text-align: center;
}
<table id="my-table"></table>