为了账号安全,请及时绑定邮箱和手机立即绑定

将二维数组 JavaScript 映射到 HTML 表格

将二维数组 JavaScript 映射到 HTML 表格

慕运维8079593 2023-04-27 17:03:10
我有一个像这样的二维数组[["Manchester City", 92], ["Liverpool", 82], ["Tottenham", 78], ["Chelsea", 78], ["Manchester United", 72], ["Arsenal", 69]]我想将 2D Array 的所有数据映射到一个 html 表中,这里是我的 html 表代码示例<table id="codexpl">    <tr>        <th>No</th>        <th>Club</th>        <th>Points</th>    </tr>    <tr>        <td>row 1 col 1</td>        <td>row 1 col 2</td>        <td>row 1 col 3 </td>    </tr>    <tr>        <td>row 2 col 1</td>        <td>row 2 col 2</td>        <td>row 2 col 3 </td>    </tr></table>那么如何解决呢?谢谢。
查看完整描述

3 回答

?
慕标5832272

TA贡献1966条经验 获得超4个赞

function createTable(tableData) {

  var table = document.createElement('table')

    , tableBody = document.createElement('tbody');


  tableData.forEach(function(rowData) {

    var row = document.createElement('tr');


    rowData.forEach(function(cellData) {

      var cell = document.createElement('td');

      cell.appendChild(document.createTextNode(cellData));

      row.appendChild(cell);

    });


    tableBody.appendChild(row);

  });


  table.appendChild(tableBody);

  document.body.appendChild(table);

}


createTable([["Manchester City", 92], ["Liverpool", 82], ["Tottenham", 78], ["Chelsea", 78], ["Manchester United", 72], ["Arsenal", 69]]

);


查看完整回答
反对 回复 2023-04-27
?
手掌心

TA贡献1942条经验 获得超3个赞

遍历您的数组,对于每个顶级元素,向表中添加一行。然后,对于每个下一级元素,添加一个单元格并将元素的内容插入到表格单元格中。



查看完整回答
反对 回复 2023-04-27
?
繁花不似锦

TA贡献1851条经验 获得超4个赞

你可以这样做:



const toTable = (arr) =>

  `<table id="codexpl">

    <tr>

        <th>No</th>

        <th>Club</th>

        <th>Points</th>

    </tr>

    ${arr.map(

    (item, index) =>

      `<tr>

      <td>${index + 1}</td>

      <td>${item[0]}</td>

      <td>${item[1]}</td>

  </tr>`

  ).join('\n')}

</table>`

只需将数组传递给它,它就会返回 HTML 代码。


查看完整回答
反对 回复 2023-04-27
  • 3 回答
  • 0 关注
  • 98 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信