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添加