Question

所以我有2个阵列 var num = [＆＃34; 1＆＃34;，＆＃34; 2＆＃34;，＆＃34; 3＆＃34;]; var cars = [＆＃34; Saab＆＃34;，＆＃34; Volvo＆＃34;，＆＃34; BMW＆＃34;];
然后我做了一个按钮，它会添加行和列，并将我的2个数组的值放在表中。但是我还不知道怎么把它变成二维数组并将它显示在我的桌子上。

<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萨博）

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

Answer 1

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

形式

var myCars = [{Pos: 1, Make: "Saab"}, {Pos: 2, Make: "Volvo"}, {Pos: 2, Make: "BMW"}]然后我们会得到一个像

这样的表格

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数组的形式生成数据作为第一个参数。我们来做吧;

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);

Answer 2

使用您的方法这是一个简单的解决方案。

＆＃13;

function myFunction() {

  var num = ["1", "2", "3"];
  var cars = ["Saab", "Volvo", "BMW"];
  var table = document.getElementById("myTable");
  var rows = new Array(cars.length);
  var numCell, carCell;

  for (var i = 0; i < cars.length; i++) {
    rows[i] = table.insertRow(i);
    numCell = rows[i].insertCell(0);
    carCell = rows[i].insertCell(1);
    numCell.appendChild(document.createTextNode(num[i]));
    carCell.appendChild(document.createTextNode(cars[i]));
  }

}

＆＃13;

<button onclick="myFunction()">Try it</button>

<table id='myTable'></table>

＆＃13;

如何使用2d数组插入表行和列

2 个答案: