1

我正在尝试使用我刚刚得到的 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   |
----+-------+-------+----

如您所见td，每行将缺少 2 个 s，是否可以用空 td填充第一个缺少td的 s 以便

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

3 回答 3

1

演示：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);
}
于 2013-10-13T17:01:56.323 回答
1

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

jsfiddle Demo 简单易懂，修改

代码 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;
}

或者，如果您想要空白 TD 的第一个

首先使用空白 TD 进行演示

只是改变：到这个... for (var j=max-1; j>=0; j--){ ...

玩得开心

于 2013-10-13T17:04:28.643 回答
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]);
    }
}
于 2013-10-13T16:50:46.857 回答