javascript - 使用 jQuery/Javascript 修改表格单元格的内容

Question

我正在尝试编写一个函数来更改表格单元格的内容。我的表格如下所示:

<table id="stock_table" style="table-layout:fixed">
<tr>
      <td class = "positive">
      <div id="symbol">GOOG</div> 
      <div id="change">+12.22</div>
      <div id="lasttrade">539.08</div>
      </td>
      <td class = "positive">
      <div id="symbol">ANF</div> 
      <div id="change">+4.24</div>
      <div id="lasttrade">63.45</div>
      </td>

这是一个包含股票信息等的表。问题是，价格变化相当快，所以我需要一种方法来修改表中单元格的内容。为了访问每个单元格，我有以下 Javascript 函数:

function goThruCells() {
             var table = document.getElementById("stock_table");
                 for (var i = 0, row; row= table.rows[i]; i++) {
                      for (var j = 0, col; col = row.cells[j]; j++) {
                           **I don't know what to do here**
                      }
                 }
}

我不确定如何访问每个单元格中的每个元素。我意识到这张 table 没什么了不起的，所以如果有人有任何重新设计的建议，我很乐意倾听。如果有人有任何建议或指示，我们将不胜感激。

Answer 1

首先，您需要更改 div 属性。 IDs can exist only once per page ;类可以多次使用。

由于您无论如何都要更改标记，因此您可以向每个 div 添加唯一的 ID，如下所示:

<td class = "positive">
<div id="GOOG_symbol" class="symbol">GOOG</div> 
<div id="GOOG_change" class="change">+12.22</div>
<div id="GOOG_lasttrade" class="lasttrade">539.08</div>
</td>

现在您可以单独引用每个 div，而无需诉诸循环:

$( "#GOOG_lasttrade" ).doSomething();

如果您仍然需要触摸每个 div，您可以使用 jQuery 循环:

$( ".positive div" ).each( function() {
    $( this ).css( 'color', 'red' ); // Insert an appropriate statement here.
});