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显示了一个示例，它将遍历任意大小的表，并突出显示上一行中已更改的单元格。

$(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是两个tr的id，这里是一个示例代码（未经过测试）。

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/

希望这有帮助。

我建议你为每个attr做一个TD并将mysql id放在那里，这样你只会比较数据库中相同的行，否则如果你的第一个列表有更多项目然后第二个列表结果将被破坏。

Answer 4

假设您的表格标识为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 ..这可以在div内。希望td也可以工作

在按钮上单击使用此.live，您可以选择div的样式

像突出显示一样。

使用addClass函数os jquery itslef或者你可以使用jquery add

添加css

Jquery迭代表并突出显示已更改的单元格

5 个答案: