使用Javascript/jQuery循环浏览HTML表格

-4

我在努力弄清楚如何在HTML中循环表格。使用Javascript/jQuery循环浏览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>

任何帮助将不胜感激。

来源

2016-03-07 Karl

向我们展示更多的代码，你试图做 – depperm

我们不能真正帮助您调试代码，无需*眼看*你的代码是什么？ –

所以，你要填写表格从对象？ –

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>

来源

2016-03-07 09:01:22 Dfaure

访问循环中的DOM节点并不是一个好习惯（for，while，...）。这会显着降低您的编码速度。 jQuery试图找到每个可能非常慢的循环的选定节点。另外，这个jQuery选择器的可读性不是很好，尤其是当你在一段时间后回到你的代码。 – bulicmatko

你是完全正确的，我不会把这种类型的代码放在生产环境中。无论如何，目的只是为了提供某种概念验证。 – Dfaure

感谢@bulicmatko

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

来源

2016-03-07 09:07:01 Karl

我发布了这个答案:) – bulicmatko

你可以尝试这样的：

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。

希望它帮助;）

来源

2016-03-07 09:13:21 bulicmatko

使用Javascript/jQuery循环浏览HTML表格

回答

相关问题