Question

我正在尝试将2D数组中的项添加到表中，但是所有内容都显示在左侧的一栏中。如何分离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>

Answer 1

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

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

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>

Answer 2

应该是这样

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

因为您可能不需要在第二个循环中迭代表行。如果您愿意，它将在每一行中仅添加一个表数据。

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

2 个答案: