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

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 转置表格 - 从这个答案中窃取：

如果你想显示列，而不是行，试试这个简单的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>