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

Posted 2023-03-05

【中文标题】获取嵌套数组项以附加到 HTML 表中的新列

【英文标题】：Get nested array items to append to new column in HTML Table

【发布时间】：2019-02-18 19:06:48

【问题描述】：

我正在尝试将二维数组中的项目附加到表中，但所有内容都出现在左侧的一列中。如何分离 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>

【参考方案1】：

应该是这样的

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

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

【讨论】：

嗯，这有助于将语言数组放入下一列，但它仅适用于名称和语言的最后一项。我怎样才能以这种方式列出数组中的所有项目？感谢您的帮助

【参考方案2】：

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

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

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>

【讨论】：

非常感谢！这正是我想要达到的目标。另外，请问您为什么将 getElementByID 更改为 querySelector？

我没看到你在哪里选择表格，我只是更习惯使用查询选择器而已

嘿，克里斯，您是否介意看一下我的最新帖子（关于此表的另一个问题），因为您帮我解决了这个问题？干杯！！ ***.com/questions/52359079/…

看来您已经有了 miozzz 的不错答案，我会建议相同的解决方案。您也可以使用 async/await，但由于您有一个 fetch 循环，因此使用 Promise.all 具有更好的性能。他确实犯了一个小错误，只需将 Promise.all(ps) 更改为 Promise.all(psArr) 就可以了。

谢谢克里斯！ Promise.all 是要走的路。