Question

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

我有一个2D Javascript对象，我想从index i,j填充myObject[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>

非常感谢任何帮助。

Answer 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>

Answer 2

谢谢@bulicmatko

您可以尝试这样的事情：jsfiddle.net/pt9go1s6

Answer 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。

希望它有所帮助;）

使用Javascript / jQuery通过HTML表循环

3 个答案: