从多维javascript数组创建html表
[英]Creating html table from multidimensional javascript array
问题描述
我试图从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
3 个解决方案
解决方案1
3 2013-12-23 18:05:53
你不能 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。 这比逐步建立表更有效。
解决方案2
2 已采纳 2013-12-23 18:07:06
您不应该将这样的内容添加到表中，因为浏览器必须重绘整个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
});
我为您制作了一个Jsfiddle： JSFiddle
玩得开心 ！
解决方案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>
这是工作代码，在这个小提琴上http://jsfiddle.net/fn4Wz/
从HTML中的表格在JavaScript中创建数组
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.