Question

我正在尝试使用我刚刚获得的json响应将值插入表中，但问题是我收到的数组对象具有不同数量的元素

e.g.
[
   [1,1,1,4,4],
       [2,2,2],
       [3,3,3]
]

正如我已经说明的那样，我想循环遍历所有值或主数组，然后循环每个元素，并像td一样插入它们：

var re = [];
re.push("<table>");
for(i = 0; i < arr.length; i++) {
  re.push("<tr>");
  for(k = 0; k < arr[i].length; k++) {
     re.push('<td>' + arr[i][k]);
  }
}


// output will be
--------+-------+-------+-------+-------+
|   1   |   1   |   1   |   4   |   4   |
----+-------+-------+-------+-------+---+
|   2   |   2   |   2   |
----+-------+-------+----
|   3   |   3   |   3   |
----+-------+-------+----

正如您所看到的，每行会有2个td个丢失，是否可以填充第一个缺少td的空td，以便< / p>

--------+-------+-------+-------+-------+
|   1   |   1   |   1   |   4   |   4   |
--------+-------+-------+-------+-------+
|       |       |   2   |   2   |   2   |
--------+-------+-------+-------+-------+
|       |       |   3   |   3   |   3   |
--------+-------+-------+-------+-------+

Answer 1

这样的事可能有用（未经测试）：

//Getting the length of the longest set of numbers;
var maxLength = 0;
for (var i = 0; i < arr.length; i++) {
    if (arr[i].length > maxLength)
        maxLength = arr[i].length;
}

//Iterate and push values
//Check the length of the array first, add padding if necessary
var re = [];
re.push("<table>");
for(i = 0; i < arr.length; i++) {
    re.push("<tr>");

    //Check if array is shorter
    if (arr[i].length < maxLength) {
        //found short array! add some blank rows!
        for (var k = 0; k < maxLength - arr[i].length; k++) {
            re.push("<td></td");
        }
    }

    //Iterate values as normal
    for(k = 0; k < arr[i].length; k++) {
        re.push('<td>' + arr[i][k]);
    }
}

Answer 2

DEMO： http://jsfiddle.net/5VPps/

我会使用DOM方法（通常更快），然后继续创建表格......

var table = document.createElement("table");
var max = 0;

for(var i = 0; i < arr.length; i++) {
     var row = table.insertRow(i);
     var len = arr[i].length;
     max = len > max ? len : max;

     for(k = 0; k < len; k++) {
         row.insertCell(k)
            .appendChild(document.createTextNode(arr[i][k]));
     }
}

...然后对Array进行第二次迭代，并根据需要添加填充单元格。

for (i = 0; i < arr.length; i++) {
    while (table.rows[i].cells.length < max)
        table.rows[i].insertCell(0);
}

Answer 3

支持任何长度和任何位置的简单方法最长的阵列：

<强> jsfiddle Demo simple and easy to understand, modify

代码TD在ro结尾处：

arr = new Array([1,1,1,4,4],[2,2,2],[3,3,3]);


$('body').append(printIt(arr));


function printIt(arr){
    str ="<table border='1'>";
    max = 0;
    for (var i=0; i<arr.length; i++) { if (arr[i].length>max) max = arr[i].length; }
    if(max==0) return "";
    for(var i=0; i<arr.length; i++) {
        str +="<tr>";
        for (var j=0; j<max; j++){
           if (typeof arr[i][j] != 'undefined')  str +="<td>"+arr[i][j]+"</td>"; 
              else str +="<td> </td>";
        }
        str +="</tr>";
     }
    str +="</table>";
return str;
}

OR 如果您想要空白TD的第一个

Demo with blank TDs first

只需更改：到此... for (var j=max-1; j>=0; j--){ ...

玩得开心

不同数量的元素，推送到表，javascript

3 个答案: