Javascript 如何使用数组按列填充表？

例如，我有3个长度相同的数组：

arrayOne=['a'，'b'，'c']
数组two=['d'，'e'，'f']
数组树=['g'，'h'，'i']

我想知道是否有一种方法可以使用jQuery按列填充HTML5表（或者即使这是此类操作的最佳实践）。到目前为止，我已经看到了这一点

这非常接近于回答我的问题，但它不使用数组

理想的解决方案是通过使行数与任何数组的长度相同来填充表。（用户将能够选择数组的长度，因此，行的数量……我想我被迷住了）

例如：

之前

第一列
第二列
第三纵队

预期产出

第一列
第二列
第三纵队
A.
D
G
B
E
H
C
F
我

我尝试过的代码能够填充其中一列，但我无法获得更多

const columnOne=arrayOne.map（p=>{
const rowItem=$（''）.html（p）
返回$（''）.append（行项目）
})
$（“#表内容”）.append（columnOne）

基本上，您需要创建一个行数据数组，然后可以使用代码将其映射到表行中。我采用了一种简单化的方法，使处理与其他数组长度不同的数组变得更容易

const arrayOne=['a'，'b'，'c']；
常量数组two=['d'，'e'，'f']；
常量数组树=['g'，'h']；
//制作一个行数组，在数据不足的地方添加空白值
常数l=数学最大值（arrayOne.length、arrayTwo.length、ArrayTree.length）；
让数组=[]；
for（设i=0；i{
设行=$（''）；
p、 forEach（v=>row.append（$（''）.html（v））；
返回行；
});
$（“#表内容”）。追加（列）

第一列
第二列
第三纵队

基本上，您需要创建一个行数据数组，然后可以使用代码将其映射到表行中。我采用了一种简单化的方法，使处理与其他数组长度不同的数组变得更容易

const arrayOne=['a'，'b'，'c']；
常量数组two=['d'，'e'，'f']；
常量数组树=['g'，'h']；
//制作一个行数组，在数据不足的地方添加空白值
常数l=数学最大值（arrayOne.length、arrayTwo.length、ArrayTree.length）；
让数组=[]；
for（设i=0；i{
设行=$（''）；
p、 forEach（v=>row.append（$（''）.html（v））；
返回行；
});
$（“#表内容”）。追加（列）

第一列
第二列
第三纵队

为什么要使用两次迭代？？。只需一次最长数组长度的直接迭代

const arrayOne=['a'，'b'，'c']；
常量数组two=['d'，'e'，'f']；
常量数组树=['g'，'h']；
const maxSize=Math.max（arrayOne.length、arrayTwo.length、arraytree.length）；
for（设i=0；i

第一列
第二列
第三纵队

为什么要使用两次迭代？？。只需一次最长数组长度的直接迭代

const arrayOne=['a'，'b'，'c']；
常量数组two=['d'，'e'，'f']；
常量数组树=['g'，'h']；
const maxSize=Math.max（arrayOne.length、arrayTwo.length、arraytree.length）；
for（设i=0；i

第一列
第二列
第三纵队

非JQuery解决方案 您需要的是一个行数组。只需将列数组放在父数组中：

const rows=[arrayOne，arrayTwo，arraytree]；

然后可以使用双

forEach

循环来创建行和列：

const table=document.getElementById（'my-table'）；
const tbody=table.querySelector（'tbody'）；
常数数组=['a'，'b'，'c']；
常量数组two=['d'，'e'，'f']；
常量数组树=['g'，'h'，'i']；
常量行=[arrayOne，arrayTwo，ArrayTree]；
rows.forEach（row=>{
const tr=document.createElement（'tr'）；
row.forEach（d=>{
const td=document.createElement（'td'）；
td.textContent=d；
tr.appendChild（td）；
});
t附肢儿童（tr）；
});

一
二
三
非JQuery解决方案
您需要的是一个行数组。只需将列数组放在父数组中：

const rows=[arrayOne，arrayTwo，arraytree]；

然后可以使用双
forEach
循环来创建行和列：


const table=document.getElementById（'my-table'）；
const tbody=table.querySelector（'tbody'）；
常数数组=['a'，'b'，'c']；
常量数组two=['d'，'e'，'f']；
常量数组树=['g'，'h'，'i']；
常量行=[arrayOne，arrayTwo，ArrayTree]；
rows.forEach（row=>{
const tr=document.createElement（'tr'）；
row.forEach（d=>{
欺骗