從多維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.