将多维数组转换为 HTML 表

Question

玩一个快速的概念。希望答案很简单，我的尝试只是因为某种原因在这里失败了。

假设我有一个数组，例如：

var items = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]];

我正在尝试翻转数据，因此将其转换为：

var items_converted = [[1,4,7,10],[2,5,8,11],[3,6,9,12]];

到此为止。现在，使用我的新多维数组，我想将每个内部数组的内容推送到 HTML 表格行：

<tr>
    <td>1</td>
    <td>4</td>
    <td>7</td>
    <td>10</td>
</tr>
<tr>
    <td>...

在这里玩：http://jsfiddle.net/XDFd2/

我尝试用两个for-loops 来做，但它似乎没有附加<tr> 或</tr>。

var items = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]];
var items_converted = [[1,4,7,10],[2,5,8,11],[3,6,9,12]];
var table = $('#table');

for(var i=0; i<items_converted.length; i++){
        if(i==0){
            table.append('<tr>');
        }
    for(var j=0; j<items_converted[i].length; j++){
        table.append('<td>'+items_converted[i][j]+'</td>');
        if(j===items_converted[0].length-1){
            table.append('</tr');
        }
    }
}

我觉得我在这里遗漏了一些非常简单的东西......也许是循环处理的顺序？

感谢任何帮助。

在这里玩：http://jsfiddle.net/XDFd2/

Answer 1

您正在尝试使用append()，如document.write()。这是错误的做法。您应该从 table 节点开始查看 DOM，并为每行和单元格附加节点。

基本上是 $('<tr>') 创建一行，然后是 table.append() 调用将其添加到 DOM。细胞也是如此。

var items = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]];
var items_converted = [[1,4,7,10],[2,5,8,11],[3,6,9,12]];
var table = $('#table');
var row, cell;

for(var i=0; i<items_converted.length; i++){
     row = $( '<tr />' );
    table.append( row );
    for(var j=0; j<items_converted[i].length; j++){
        cell = $('<td>'+items_converted[i][j]+'</td>')
        row.append( cell );
    }
}

Fiddle