从多维javascript数组创建html表
我试图从Javascript中的嵌套for循环数组创建一个html表。当我尝试将从多维javascript数组创建html表,javascript,jquery,multidimensional-array,html-table,Javascript,Jquery,Multidimensional Array,Html Table,我试图从Javascript中的嵌套for循环数组创建一个html表。当我尝试将标记附加到表中时，它们会被放入一个名为tbody的元素中。如何将tr标记附加到table元素而不是tbody元素中 <html> <head> <script src='jq.js'></script> </head> <body> <table id='tb'></table&g
<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>
$（'#tb'）。就绪（
函数（）{
log（'table-loaded'）；
var-ar=Array（2）；
对于（var i=0；i您不能。HTML表格由三部分组成：
thead
包含标题行tbody
包含数据行。如果您想创建不同的行组，可以有多个数据行（例如，如果行=月，您可以为每年单独设置一个tbody
）tfoot
包含页脚行
如果将行直接放在表
标记中，则假定它们是tbody
的一部分，浏览器会自动为您创建此元素。您可以将所有行放在tbody
元素中，也可以将它们直接放在表
中
代码的问题与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
}
}
for（var j=0；j您不能。HTML表格由三部分组成：
thead
包含标题行tbody
包含数据行。如果您想创建不同的行组，可以有多个数据行（例如，如果行=月，您可以为每年单独设置一个tbody
）tfoot
包含页脚行
如果将行直接放在表
标记中，则假定它们是tbody
的一部分，浏览器会自动为您创建此元素。您可以将所有行放在tbody
元素中，也可以将它们直接放在表
中
代码的问题与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
}
}
for（var j=0；j您不应该将这样的内容附加到表中，因为浏览器必须重新绘制整个DOM，所以效率不高
您应该在字符串中构建表，然后将整个字符串附加到表中，如下所示：
$('#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!');
//Prepare the outputed string
var theTable = "";
for(var j=0;j<ar.length;j++){
theTable += '<tr>';
for(var k=0;k<2;k++){
theTable += '<td>'+ar[k][j]+'</td>';
}
theTable += '</tr>';
}
//Finally appended the whole string to the table
$('#tb').append(theTable);
//expected:
//12
//34
//actual
//1 2 3 4
});
$（'tb'）。就绪（
函数（）{
log（'table-loaded'）；
var-ar=Array（2）；
对于（var i=0；i
玩得开心！您不应该将这样的内容附加到表中，因为浏览器必须重新绘制整个DOM，所以效率不高
<body>
<table id='tb1'>
<tbody id='tb'>
</tbody>
</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++){
$('#tb').append('<tr>');
for(var k=0;k<2;k++){
$('#tb').append('<td>'+ar[k][j]+'</td>');
}
$('#tb').append('</tr>');
}
//expected:
//12
//34
//actual
//1 2 3 4
});
</script>
</html>
您应该在字符串中构建表，然后将整个字符串附加到表中，如下所示：
$('#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!');
//Prepare the outputed string
var theTable = "";
for(var j=0;j<ar.length;j++){
theTable += '<tr>';
for(var k=0;k<2;k++){
theTable += '<td>'+ar[k][j]+'</td>';
}
theTable += '</tr>';
}
//Finally appended the whole string to the table
$('#tb').append(theTable);
//expected:
//12
//34
//actual
//1 2 3 4
});
$（'tb'）。就绪（
函数（）{
log（'table-loaded'）；
var-ar=Array（2）；
对于（var i=0；i
玩得开心！
<body>
<table id='tb1'>
<tbody id='tb'>
</tbody>
</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++){
$('#tb').append('<tr>');
for(var k=0;k<2;k++){
$('#tb').append('<td>'+ar[k][j]+'</td>');
}
$('#tb').append('</tr>');
}
//expected:
//12
//34
//actual
//1 2 3 4
});
</script>
</html>
$（'#tb'）。就绪（
函数（）{
log（'table-loaded'）；
var-ar=Array（2）；
对于（变量i=0；i
$（'#tb'）。就绪（
函数（）{
log（'table-loaded'）；
var-ar=Array（2）；
对于（var i=0；i而言，表的主体内容包含在
元素中。如果不存在，现代浏览器将添加它。这是应该的方式。正如您所知，您不需要在初始化数组时遇到太多麻烦。只需执行以下操作：ar=['1'，'2'，['3'，'4']]；
这很简单表的主体内容包含在
元素中。如果不存在，现代浏览器会添加它。这是应该的方式。正如您所知，您不需要在初始化数组时遇到太多麻烦。只需这样做：ar=['1'，'2'，['3'，'4']]这是一个很好的建议，但它不能解决他关于tbody
的问题。如果你看一下代码，它会说：//expected:…//actual。那么“tbody问题”这并不是我认为效率上的区别是1个dom更改与n^2个dom更改。这是最好的解决方案。从Barmars的回答中，我可以看到浏览器会自动将我试图附加到表中的任何内容添加到tbody元素。这是一个很好的建议，但它不会解决他关于t的问题body
。如果您查看代码，它会说：//预期：…//实际”。所以“tbody问题”这并不是我认为效率上的区别是1个dom更改与n^2个dom更改。这是最好的解决方案。从Barmars的回答中，我可以看到浏览器会自动将我试图附加到表中的任何内容添加到tbody元素。请记住，多个tbody元素是特定用户允许的请记住，规范允许使用多个tbody元素。