从多维javascript数组创建html表
[英]Creating html table from multidimensional javascript array
问题描述
I was trying to create an html table from a nested for loop array in Javascript. 
我试图从Javascript中的嵌套for循环数组创建html表。 When I try to append the <tr> tags to the table they get put in an element called tbody. 当我尝试将<tr>标记附加到表时，它们被放入称为tbody的元素中。 How can I get the tr tags to be appended in the to the table element rather than the tbody element? 如何获得将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>
3 个解决方案
解决方案1
3 2013-12-23 18:05:53
You can't. 你不能 HTML tables are composed of three sections: HTML表由三部分组成：
-
theadcontains the header rowsthead包含标题行 -
tbodycontains the data rows.tbody包含数据行。 You can have multiple of these if you want to make different groups of rows (eg if rows = months, you could have a separatetbodyfor each year).如果要创建不同的行组，则可以有多个（例如，如果行=月，则每年可以有一个单独的tbody）。 -
tfootcontains the footer rowstfoot包含页脚行
If you put rows directly within the table tag, they're assumed to be part of tbody , and the browser creates this element automatically for you. 如果将行直接放在table标记内，则假定它们是tbody一部分，浏览器会自动为您创建此元素。 You either have to put all your rows in tbody elements, or put them all directly within table . 您要么必须将所有行都放在tbody元素中，要么直接将它们全部放在table 。
The problem with your code has nothing to do with the tbody element. 您的代码问题与tbody元素无关。 The problem is that you're trying to append td elements directly to the table, rather than to the tr elements. 问题是您试图将td元素直接附加到表，而不是tr元素。 You're treating $('#tb').append() as if it's concatenating HTML text to the document, not inserting entire HTML elements. 您将$('#tb').append()视为将HTML文本连接到文档，而不是插入整个HTML元素。 It should be something like: 应该是这样的：
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
}
}
Or you can use CtrlX's answer, where he composes the entire table as a string, then inserts it into the DOM in one step. 或者，您可以使用CtrlX的答案，即他将整个表组成一个字符串，然后一步将其插入DOM。 This is more efficient than building up the table incrementally. 这比逐步建立表更有效。
解决方案2
2 已采纳 2013-12-23 18:07:06
You shouldn't append content like this to your table, because the browser must redraw the whole DOM, so it's not very efficient. 您不应该将这样的内容添加到表中，因为浏览器必须重绘整个DOM，所以效率不是很高。
You should build your table inside a string, then append the whole string to your table, like this : 您应该在字符串中构建表，然后将整个字符串附加到表中，如下所示：
$('#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
});
I've made a Jsfiddle for you : JSFiddle 我为您制作了一个Jsfiddle： JSFiddle
Have fun ! 玩得开心 ！
解决方案3
0 2013-12-23 18:09:30
<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>
this is the working code, on this fiddle http://jsfiddle.net/fn4Wz/ 这是工作代码，在这个小提琴上http://jsfiddle.net/fn4Wz/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.