修改表格单元格的内容使用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** 
         } 
       } 
} 

我不知道如何访问每个单元格中的每个元素。我意识到桌子没什么了不起，所以如果有人有任何重新设计的建议，我很乐意听。如果任何人有任何建议或指针，他们将不胜感激。

Answer 1

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

既然你无论如何都会改变你的标记，你可以添加一个唯一的ID给每个DIV，像这样：

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

Answer 2

使用类而不是已经提到的ID。另外你的表格结构有点奇怪，但既然你已经有了，我不会改变它。所以用类而不是id的你现在有这个代码

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

并且遍历表数据只需执行以下操作。

$('#stock_table tr td').each(function(){ 
    var symbol = $(this).find('.symbol').html(); 
    var change = $(this).find('.change').html(); 
    var lasttrade = $(this).find('.lasttrade').html(); 
    console.log(symbol); 
    console.log(change); 
    console.log(lasttrade); 

    // to change the value 
    symbol.html("new value"); 

});