Jquery遍歷表並突出顯示已更改的單元格

Question

我有一張表，它是mysql記錄的歷史記錄。

我想添加一個突出顯示更改的按鈕。

<table> 
<tr> 
    <td>100</td> 
    <td>200</td> 
    <td>300</td> 
</tr> 
<tr> 
    <td>100</td> 
    <td>200</td> 
    <td>600</td> 
</tr> 
</table> 

在這個例子中，600將被強調，因爲它是300，現在是600

更新：謝謝，我應該說會有超過2行。可能高達20行

Answer 1

This jsFiddle顯示將遍歷任何規模大小的表，並強調已經從先前行改變了細胞的例子添加CSS。

$(function() { 
var $rows = $("tr"); 

for (oldIndex = 0; oldIndex < $rows.length-1; oldIndex++) { 
    var newIndex = oldIndex + 1; 
    var $oldCols = $("td", $rows[oldIndex]); 
    var $newCols = $("td", $rows[newIndex]); 

    for (col = 0; col < $oldCols.length; col++) { 
     var $newCol = $($newCols[col]); 
     if ($($oldCols[col]).html() != $newCol.html()) { 
      $newCol.addClass("highlight"); 
     } 

    } 


} 
});​ 

Answer 2

您的解決方案應該沿着這些路線。假設set1和set2是兩個ID的tr s這裏是一個示例代碼（未測試）。

var s1 = $('tr#set1 td'); 
var s2 = $('tr#set2 td'); 

var l = $('tr#set1 td').length; 

for(var i =0; i<l i++){ 
    if(s1.eq(i).text() != s2.eq(i)){ 
     $(s2.eq(i)).highlight(); 
    } 
} 

Answer 3

$('table tr.new td').each(function(i){ 
    //First TR td, Previous Rows 

    td = $(this); 
    check = $('table tr.prev td:eq('+i+')'); 

    if(td[0].innerText != check[0].innerText) 
    { 
     check.addClass('Changed'); 
    } 
})​ 

這應該這樣做，但你需要添加2類：

<table> 
<tr class="new"> 
    <td>150</td> 
    <td>200</td> 
    <td>300</td> 
</tr> 
<tr class="prev"> 
    <td>100</td> 
    <td>200</td> 
    <td>600</td> 
</tr> 
</table>​ 

演示：http://jsfiddle.net/hjXZd/1/

希望這有助於。

---

我建議你做的每一個TD一個attr並把MySQL的ID在那裏，這樣你纔會比較處於數據庫同一行，否則，如果你的第一個列表中有多個項目，則第二個清單的結果將是腐敗的。

Answer 4

假設你的表有ID results，這裏是一個解決方案：

var topRow = $('table#results tr:eq(0)'); 
var bottomRow = $('table#results tr:eq(1)'); 
topRow.find('td').each(function(index,item){ 
    var shadow = bottomRow.find('td:eq('+index+')'); 
    if($(item).contents().text()!=shadow.contents().text()){ 
     shadow.css({'background':'yellow'}); 
    } 
}); 

更新：這個解決方案的頂行與所有那些如下比較：

$('table#results tr:eq(0) td').each(function(index,item){ 
    var orig = $(item).contents().text(); 
    $('table#results tr:gt(0)').find('td:eq('+index+')').each(function(index2,item2){ 
     var shadow = $(item2); 
     if(orig!=shadow.contents().text()){ 
      shadow.css({'background':'yellow'}); 
     } 

    }); 
}); 

Answer 5

使用jQuery .live可以處理多個元素。 請看這裏 http://api.jquery.com/live/

你必須給更改後的值的ID ..它可以在divs內。 希望TD也可以利用這方面的工作

在按鈕點擊.live可以chnage DIV

的風格一樣突出。

使用addClass功能OS的jQuery itslef或者您可以使用jQuery添加