使用 Javascript/jQuery 循环遍历 HTML 表答案

【问题标题】：Looping through HTML table with Javascript/jQuery使用 Javascript/jQuery 循环遍历 HTML 表
【发布时间】：2016-06-20 17:07:16
【问题描述】：

我正在努力弄清楚如何在 HTML 中循环遍历表格。

我有一个 2D Javascript 对象，我想用来自myObject[i][j] 的index i,j 填充单元格。我有一个基本的 html 表格模板，但带有空白的 <td></td> 标签。我已经研究过在 jQuery 和 Javascript 中执行此操作的方法，但无济于事。

编辑：这是我的代码：

var table = document.getElementById("myTable");
for (var i = 0, row; row = table.rows[i]; i++) {
   for (var j = 0, col; col = row.cells[j]; j++) {
     col = myObject[i][j]
   }  
}

我的 HTML 只是一个标准表格，例如：

    <table id="myTable">
        <thead>
          <tr>
            <th></th>
          </tr>
          <tr>
            <td></td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th></th>
            <td></td>
        </tbody>
      </table>

任何帮助将不胜感激。

【问题讨论】：

向我们展示更多代码以及您尝试过的操作
如果没有查看您的代码，我们无法真正帮助您调试您的代码...
所以你想从对象填充表格？
是的 - 完全正确。对象中的每个索引都与表中相应的行/列索引匹配。
@Karl 你想生成这个表还是已经有了？

标签： javascript jquery html html-table

【解决方案1】：

可以使用 jQuery 解决方案 child related selectors 过滤相关单元格。

var ar = [
  ['A', 'B'],
  ['C', 'D']
];
for (var r = 0; r < 2; ++r) {
  for (var c = 0; c < 2; ++c) {
    $('table tr:nth-of-type(' + (r + 1) + ') td:nth-of-type(' + (c + 1) + ')').text(ar[r][c]);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>.</td>
    <td>.</td>
  </tr>
  <tr>
    <td>.</td>
    <td>.</td>
  </tr>
</table>

【讨论】：

在循环（for、while...）中访问 DOM 节点不是一个好习惯。这会显着减慢您的代码速度。 jQuery 尝试在每个循环中查找选定的节点，这可能非常慢。此外，这个 jQuery 选择器的可读性不是很好，尤其是当您在一段时间后回到您的代码时。
你完全正确，我不会将这种代码放在生产环境中。无论如何，目的只是提供某种概念证明。

【解决方案2】：

谢谢@bulicmatko

你可以试试这样的：jsfiddle.net/pt9go1s6

【讨论】：

我将此作为答案发布：)

【解决方案3】：

你可以试试这样的：

HTML：

<div id="tableWrap"></div>

JS：

var tableWrap = document.getElementById("tableWrap");

var data = [
    ['First Name', 'Last Name', 'Age'],
    ['Johnny', 'Bravo', '27'],
    ['Bugs', 'Bunny', '35'],
    ['Mickey', 'Mouse', '35'],
];

var table = "<table>";

for (var i = 0; i < data.length; i++) {
    table += "<tr>";
    for (var j = 0; j < data[i].length; j++) {
        table += "<td>" + data[i][j] + "<td>";
    }

    table += "</tr>";
}

table += "</table>";

tableWrap.innerHTML = table;

这里是demo。

希望对你有帮助；）

【讨论】：