javascript - 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 循环:(请注意，我在表上放置了“foo”的 id)

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;

利用传递给 map 回调的第二个参数:

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

<小时/>

开个玩笑，您可以使用 CSS 转置表格 - 从 this answer 窃取。 :

If you want to display columns, not rows, try this simple CSS

tr { display: block; float: left; }
th, td { display: block; }