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

Different number of elements, push to tables, javascript

本文关键字：javascript 元素      更新时间：2023-09-26

我正在尝试使用刚刚得到的 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 s，是否可以用空 td 填充第一个缺失的 td s，以便

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

演示： 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]));
     }
}

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

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

这样的东西可能会起作用（未经测试）：

//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]);
    }
}

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

jsfiddle演示简单易懂，修改

代码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--){ ...

玩得愉快

相关文章：