使用函数[闭合]进入JavaScript表的二维数组

问题描述 投票:-5回答:2

我想使用JavaScript函数从数组制作html表。我想使用循环函数来做到这一点,但是我在努力寻找如何将数组循环到html表的方法。我想在三个不同的栏中分别输入人名,年龄和课程名称,但是我正在努力寻找一种方法来实现这一目标。

这是我的代码:

function array5() {

 var table_content = [
    ["Tom", 20, "Science"],
    ["Tommy", 25, "Maths"],
    ["Fred", 22, "English"],
    ["Teddy", 20, "English"],
    ["Ted", 21, "Dance"],
    ["Tim", 22, "Maths"]
 ];

//???

}
javascript html arrays
2个回答
0
投票

您可以遍历数组并按如下所示使用insertRowinsertCell方法:

var table_content = [
               ["Tom", 20, "Science"],
               ["Tommy", 25, "Maths"],
               ["Fred", 22, "English"],
               ["Teddy", 20, "English"],
               ["Ted", 21, "Dance"],
               ["Tim", 22, "Maths"]
];
var table = document.getElementById("myTable");
for(var i = 0; i < table_content.length; i++){
     var row = table.insertRow(0);
     var cell1 = row.insertCell(0);
     var cell2 = row.insertCell(1);
     var cell3 = row.insertCell(2);
     cell1.innerHTML = table_content[i][0]
     cell2.innerHTML = table_content[i][1]
     cell3.innerHTML = table_content[i][2]
}
<table id="myTable"></table>

-1
投票

function array5() {

 var table_content = [
    ["Tom", 20, "Science"],
    ["Tommy", 25, "Maths"],
    ["Fred", 22, "English"],
    ["Teddy", 20, "English"],
    ["Ted", 21, "Dance"],
    ["Tim", 22, "Maths"]
 ];

document.querySelector('table').innerHTML = table_content.map( item => `<tr><td>${item[0]}</td><td>${item[1]}</td><td>${item[2]}</td></tr>` ).join('\n');

}

array5();
<table></table>

-1
投票

您可以遍历数组并按如下所示使用insertRow和insertCell方法:

const myTable = document.getElementById('my-table')
  , table_content = 
      [ [ 'Tom',   20, 'Science'] 
      , [ 'Tommy', 25, 'Maths'  ] 
      , [ 'Fred',  22, 'English'] 
      , [ 'Teddy', 20, 'English'] 
      , [ 'Ted',   21, 'Dance'  ] 
      , [ 'Tim',   22, 'Maths'  ] 
      ] 

for (let row of table_content)
  {
  let xRow = myTable.insertRow()
  for( let cell of row)
    {
    xRow.insertCell().textContent = cell
    }
  }
    table {
      border-collapse: collapse;
      margin: 1em;
    }

    td {
      border: 1px solid grey;
      padding: .5em  ;
      height: 1em;
       text-align: center;
    }
<table id="my-table"></table>
© www.soinside.com 2019 - 2024. All rights reserved.