Javascript：从2个数组构建html表_Javascript_Html

Javascript：从2个数组构建html表

javascript html

Javascript：从2个数组构建html表,javascript,html,Javascript,Html,几个小时以来，我一直在寻找从两个javascript数组构建html的tbody部分的最佳方法注意：我可能不使用Jquery 我的数组包含2个child数组： var arParent = [ ["col1a", "col1b", "col1c"], ["col2a", "col2b", "col2c"] ] 我需要像这样的东西： <tr> <td>col1a</td> <td>col2a</td>

几个小时以来，我一直在寻找从两个javascript数组构建html

的tbody部分的最佳方法

注意：我可能不使用Jquery

我的数组包含2个child数组：

var arParent = [
    ["col1a", "col1b", "col1c"],
    ["col2a", "col2b", "col2c"] 
]

我需要像这样的东西：

<tr>
    <td>col1a</td>
    <td>col2a</td>
</tr>
<tr>
    <td>col1b</td>
    <td>col2b</td>
</tr>
<tr>
    <td>col1c</td>
    <td>col2c</td>
</tr>


可乐
可乐2A
col1b
col2b
col1c
二氧化碳

我会把它放在你的身体元素中。遍历数组中的每一行，然后在每一行中遍历每一列并逐个添加它

-->请注意，行数由第一个数组元素的行数决定

    <body>
        <style>
            table, tr, td {
                border: solid 1px;
            }
        </style>
        <script>
        (function() {

        var arParent = [
            ["col1a", "col1b", "col1c"],
            ["col2a", "col2b", "col2c"] 
        ];

        var table = document.createElement("table");

        for (i = 0; i < arParent[0].length; i++) {
            var row = document.createElement("tr");
            for (j = 0; j < arParent.length; j++) {
                var column = document.createElement("td");
                var content = document.createTextNode(arParent[j][i]);
                column.appendChild(content);
                row.appendChild(column);
            }
            table.appendChild(row);
        }

        document.body.appendChild(table);
        })();
    </script>
<body>


表，tr，td{
边框：实心1px；
}
（功能（）{
var arParent=[
[“col1a”、“col1b”、“col1c”]，
[“col2a”、“col2b”、“col2c”]
];
var table=document.createElement（“表”）；
对于（i=0；i

您可以先将行转换为列，然后添加到

表中

var-ar=[
[“col1a”、“col1b”、“col1c”]，
[“col2a”、“col2b”、“col2c”]
]，table=document.querySelector（'table-tbody'）；
//将行转换为列
var r=ar[0]。映射（函数（col，i）{
返回ar.map（函数（行）{
返回行[i]；
});
});
//向表中添加数据
r、 forEach（函数（e）{
table.innerHTML+=''+e[0]+''+e[1]+''
})

首先，我将把这个非表数据转换成行。然后以正常方式渲染行

也就是说：

var arParent=[
[“col1a”、“col1b”、“col1c”、“及”]，
[“col2a”、“col2b”、“col2c”和“”]
]
函数转换数据（arr）{
//将列转换为行
var行=[]；
对于（变量i=0，iLen=arr.length；i
td{
填充物：2px4px；
字体系列：“Segoe UI”，Arial，无衬线；
边框：1px实心#ccc；
}
您的解决方案正是我所需要的。您的代码简短而强大。我非常喜欢它。非常感谢。