Question

我在外部js文件中有2个数组

var fruit = ["Banana", "Orange", "Apple", "Mango"];
var colour = ["yellow", "orange", "red", "orange"];

我需要将此数据存储在表中。

let p = document.getElementById('output1');
let fruit = ["Banana", "Orange", "Apple", "Mango"];
p.innerHTML = fruit.map(i => `<td>${i}</td>`).join('');

p = document.getElementById('output2');
let colour = ["yellow", "orange", "red", "orange"];
p.innerHTML = colour.map(i => `<td>${i}</td>`).join('');

<table>
  <tr>
    <th>fruit</th>
    <th>colour</th>
  </tr>

  <tr id="output1"></tr>
  <tr id="output2"></tr>

</table>

这是行不通的，因为它是逐行输入的。如何使它逐列输入？预先感谢！

Answer 1

有很多方法可以做到这一点。这是一个for循环：（请注意，我在桌子上放了一个id“ foo”）

for(var i = 0; i < fruit.length; i++) {
    document.getElementById("foo").innerHTML += "<tr><td>" +
            fruit[i] + "</td><td>" + colour[i] + "</td></tr>";
}

通过附加到临时变量来避免对一堆innerHTML进行更改：

var tableHTML = "";
for(var i = 0; i < fruit.length; i++) {
    tableHTML += "<tr><td>" + fruit[i] + "</td><td>" + colour[i] + "</td></tr>";
}
document.getElementById("foo").innerHTML += tableHTML;

利用传递给地图回调的第二个参数：

document.getElementById("foo").innerHTML += fruit.map((fruit, index) =>
        `<tr><td>${fruit}</td><td>${colour[index]}</td></tr>`).join("");

开个玩笑，您可以使用CSS转置表格-从this answer中盗取：

如果要显示列而不是行，请尝试使用此简单的CSS
tr { display: block; float: left; }
th, td { display: block; }

Answer 2

您可以使用map将两个数组合并为一个字符串数组，然后使用innerHTML将这些新字符串插入<tbody>（我添加）中。

注意：这要求数组的长度相同。

let fruit = ["Banana", "Orange", "Apple", "Mango"];
let colour = ["yellow", "orange", "red", "orange"];

let tblItems = fruit.map((item, index) => `<tr><td>${item}</td><td>${colour[index]}</td></tr>`)

document.querySelector('#fruit-colours > tbody').innerHTML = tblItems.join('')

<table id="fruit-colours">
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Colour</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

HTML逐列而不是逐行添加数据

2 个答案: