如何使用2d数组插入表行和列 [英] How to insert table rows and columns with 2d array

问题描述

所以我有2个数组，它们是
var num = [1，2，3];
var cars = [Saab，Volvo，BMW];

我做了一个按钮，它会添加行和列，并将我的2个数组的值放入桌子。但是我不知道怎么把它变成二维数组并将它显示在我的桌子上。

SO I have 2 arrays which are var num = ["1", "2", "3"]; var cars = ["Saab", "Volvo", "BMW"];
and I made a button where it'll add rows and column and place the values of my 2 arrays in the table. HoweverIdon't know how to make it into a 2d array and display it on my table.

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var table = document.getElementById("myTable");
    var row;
    var t = [][];
    var num = ["1", "2", "3"];
    var cars = ["Saab", "Volvo", "BMW"];
    for (i = 0; i < num.length;i++){
        var row = table.insertRow(i);
        for (x = 0; x < cars[i].length;x++){
            var cell1 = row.insertCell(x);

此部分之后我不知道该怎么做而且不起作用。如何组合数组并使其显示在表格中，例如（t [0] [0]将是1萨博）

after this part i don't know what to do and it doesn't work. How can I combine the arrays and make it display it in the table for eg(t[0][0] would be 1 saab)

*cars[i] = num[x];
 cell1.innerHTML = cars[i][x];*
       }
   }
}

推荐答案

有一段时间我现在使用下面的通用代码生成表格HTML。它将需要一个对象数组，对象属性将成为表头，值将成为单元格。因此，如果您的数据格式为

For a while now i use the below generic code to generate table HTML. It will take an array of objects and object properties will become table header and values will become cells. So if your data was in the form

var myCars = [{Pos：1，Make：Saab}，{Pos：2，制作：Volvo}，{Pos：2，制作：BMW}] 然后我们会得到一张像

var myCars = [{Pos: 1, Make: "Saab"}, {Pos: 2, Make: "Volvo"}, {Pos: 2, Make: "BMW"}] then we would get a table like

var tableMaker = (o,h) => {var keys = Object.keys(o[0]),
                           rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                                           : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
                           rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []);
                           return "<table>" + rows + "</table>";
                           };
        myCars = [{Pos: 1, Make: "Saab"}, {Pos: 2, Make: "Volvo"}, {Pos: 2, Make: "BMW"}] ,
         table = tableMaker(myCars,true); // if second argument provided as truthy then headers generated
document.write(table);

但是我们手边没有类似的数据。所以，让我们来吧。我们不需要标题，所以只需传递 tableMaker 将它的第二个参数设为false。那么我们唯一要做的就是以2D数组的形式生成数据作为第一个参数。我们这样做;

However we don't have a similar data at hand. So lets make it. We don't need a header so just pass tableMaker function it's second parameter as false. Then the only thing left to us is to generate the data in the form of a 2D array as the first argument. Let's do it;

var tableMaker = (o,h) => {var keys = Object.keys(o[0]),
                           rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                                           : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
                           rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []);
                           return "<table>" + rows + "</table>";
                           },
           num = ["1", "2", "3"],
          cars = ["Saab", "Volvo", "BMW"],
         tdata = num.map((e,i) => [e,cars[i]]); // this is your 2D array.
         table = tableMaker(tdata,false), // if second argument provided as truthy then headers are generated
            
document.write(table);

这篇关于如何使用2d数组插入表行和列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！