我试图从 Javascript 中的嵌套 for 循环数组创建一个 html 表。当我尝试附加 <tr>标记到表中，它们被放入一个名为 tbody 的元素中。如何让 tr 标签附加到 table 元素而不是 tbody 元素？
<html>
<head>
<script src='jq.js'></script>
</head>
<body>
<table id='tb'></table>
</body>
<script>
$('#tb').ready(
function() {
console.log('table loaded');
var ar = Array(2);
for(var i=0;i<ar.length;i++){
ar[i]=Array(2);
}
ar[0][0]='1';
ar[1][0]='2';
ar[0][1]='3';
ar[1][1]='4';
console.log('multidimensional array created!');
for(var j=0;j<ar.length;j++){
console.log('<tr>');
$('#tb').append('<tr>');
for(var k=0;k<2;k++){
console.log('<td>'+ar[k][j]+'</td>');
$('#tb').append('<td>'+ar[k][j]+'</td>');
}
console.log('</tr>');
$('#tb').append('</tr>');
}
//expected:
//12
//34
//actual
//1 2 3 4
});
</script>
</html>
这是一个 jsfiddle
最佳答案
你不能。 HTML 表格由三部分组成:
thead包含标题行tbody包含数据行。如果你想制作不同的行组，你可以有多个这样的行(例如，如果行 = 月，你可以为每年有一个单独的tbody)。tfoot包含页脚行
如果您将行直接放在 table 标记中，它们将被假定为 tbody 的一部分，并且浏览器会自动为您创建此元素。您要么必须将所有行放在 tbody 元素中，要么将它们全部直接放在 table 中。
您的代码问题与 tbody 元素无关。问题是您试图将 td 元素直接附加到表中，而不是附加到 tr 元素中。您将 $('#tb').append() 视为将 HTML 文本连接到文档，而不是插入整个 HTML 元素。它应该是这样的:
for(var j=0;j<ar.length;j++){
console.log('<tr>');
var row = $('<tr/>').appendTo('#tb');
for(var k=0;k<2;k++){
console.log('<td>'+ar[k][j]+'</td>');
row.append('<td>'+ar[k][j]+'</td>'); // Append TD to TR
}
}
或者您可以使用 CtrlX 的答案，他将整个表格组成一个字符串，然后一步将其插入到 DOM 中。这比增量构建表更有效。
关于javascript - 从多维 javascript 数组创建 html 表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20748770/