时间戳

首页 > 解决方案 > 获取嵌套数组项以附加到 HTML 表中的新列

javascript - 获取嵌套数组项以附加到 HTML 表中的新列

问题描述

我正在尝试将二维数组中的项目附加到表中，但所有内容都出现在左侧的一列中。如何分离 tableDataArr[1] 以开始加载到下一列？

Javascript

let names = []; //populated dynamically
let language = []; //populated dynamically 
let tableDataArr = [names, language];

function renderData() {
  for (let i = 0; i < tableDataArr.length; i++) {
    tableDataArr[i].forEach(j => {
      let newRow = document.createElement("tr");
      newRow.className = "row";
      newRow.innerHTML = `<td class='cell'>${j}</td>`;
      leftTable.appendChild(newRow);
    });
  }
}

HTML

<div class='left-tbl-wrap'>
  <table class='table' id='left-table'>
    <tr class='row'>
      <th class='th'>Name</th>
      <th class='th'>Language</th>
      <th class='th'>Latest tag</th>
      <th class='th'><span class='delete'></span></th>
    </tr>
  </table>
</div>

标签： javascripthtmlarraysdom

解决方案

对于每次迭代，将名称和语言添加到同一行，然后将该行插入表中。

我在名称和语言数组中添加了一些元素来演示

let names = ["name1", "name2", "name3"]; //populated dynamically
let language = ["language1", "language2", "language3"]; //populated dynamically 
let tableDataArr = [names, language];
const leftTable = document.querySelector("#left-table");

function renderData() {
  tableDataArr[0].forEach((j, i) => {
    let newRow = document.createElement("tr");
    newRow.className = "row";
    newRow.innerHTML = `<td class='cell'>${j}</td><td class='cell'>${tableDataArr[1][i]}</td>`;
    leftTable.appendChild(newRow);
  });
}

renderData();
<div class='left-tbl-wrap'>
  <table class='table' id='left-table'>
    <tr class='row'>
      <th class='th'>Name</th>
      <th class='th'>Language</th>
      <th class='th'>Latest tag</th>
      <th class='th'><span class='delete'></span></th>
    </tr>
  </table>
</div>

推荐阅读