修改表格單元格的內容使用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"); 

});