从两个数组创建html表，其中数组长度不必相同

Question

我从某个服务器得到两个数组作为响应，这些数组可以具有不同的长度。我想从这个数组中构建一个表。

例如服务器响应是

let a1=response.a1;
let a2=response.a2;

在哪里

a1=['a','b','c'];
a2=['d','e']

所以我希望桌子是这样的：

+------+------+
| Col1 | Col2 |  
+------+------+
| a    | d    |
| b    | e    |
| c    |      |
+------+------+

我需要类似的东西：

var rows=""
for(var i=0;i<a1.length;i++)
{
    for(var j=0;j<a2.length;j++)
    {
       rows+='<tr>....</tr>'
    }
}
$('#myTbody').html(rows);

Answer 1

这里棘手的是一个数组可以比另一个长，所以首先：

1. 找到最大数组的大小
2. 创建一个循环，添加与最长数组大小一样多的表行
3. 将单元格内容添加到每一行，处理 1 个数组在该特定数组索引处可能没有任何定义值的情况（因为数组大小不同）

我已添加 // 1. // 2. 和 // 3. 以帮助参考解释。

const a1 = ['a','b','c']
const a2 = ['d','e','f','g']

const maxArrayLength = Math.max(a1.length, a2.length) // 1.

const tbody = document.querySelector('tbody');

for (let i = 0; i < maxArrayLength; i++) { // 2.
  const tr = tbody.insertRow(); // 2.
  tr.insertCell().innerHTML = a1[i] ? a1[i] : '' // 3.
  tr.insertCell().innerHTML = a2[i] ? a2[i] : '' // 3.
}

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer 2

HTML 代码：

    <table id="myTbody">
    </table>

Javascript 代码

a1 = ['a', 'b', 'c'];
a2 = ['d', 'e'];

var maxLen = 0;
if (a1.length > a2.length) {
    maxLen = a1.length;
} else {
    maxLen = a2.length;
}

var tableHtml = '<tr><th>col1</th><th>col2</th></tr>'

for (var i = 0; i < maxLen; i++) {
    tableHtml = tableHtml + '<tr>';
    tableHtml = tableHtml + '<td>' + (i >= a1.length ? '' : a1[i]) + '</td>';
    tableHtml = tableHtml + '<td>' + (i >= a2.length ? '' : a2[i]) + '</td>';
    tableHtml = tableHtml + '</tr>';
}

$('#tabby').html(tableHtml);

Answer 3

 const a1 = ['100','50000','60000'];
    const a2 = ['1111','22222222'];
    const greaterLength = (a1.length >= a2.length) ? a1.length : a2.length;

    let store = "";
    for(var i=0 ; i < greaterLength ; i++){
        let a1Value = (a1[i] != undefined) ? a1[i] : "";
        let a2Value = (a2[i] != undefined) ? a2[i] : "";
        store += `<tr> <td>${a1Value}</td> <td>${a2Value}</td></tr>`;
    }
    alert(store);

完成表格主体。

Answer 4

我在上面的答案中提到了这一点，只是想发布一个示例，说明如何绕过比较数组长度的需要。 :)

你可以将两个数组合并成另一个数组（创建一个二维数组），然后使用这个合并数组的长度来获得总列数。

然后使用嵌套的 for 循环，我们可以遍历 2d 数组中的每个数组，并将其作为行值添加到列中。

我在下面发布了一个简单的例子:)

let a1 = ['a','b','c'];
let a2 = ['d','e'];

// Create a 2d array
// will look like [['a','b',''c], ['d','e']];
let mergedArray = [a1 , a2];

for(let i = 0; i < mergedArray.length; i++) {
  // You would create the Column Here
  console.log(`Col${i}`);
  for(let j = 0; j < mergedArray[i].length; j++) {
    // And here is the row value.
    console.log(mergedArray[i][j]);
  }
}