jQuery突出显示td,如果它与同一行上的另一个td不同

时间:2013-02-14 00:20:54

标签: jquery indexing html-table

如果内部数据匹配同一行中第三列td内的数据,我需要做的是在第一列td中添加一个类。

http://jsfiddle.net/rUssu/

html table

<table border="1">
   <tr><th>first</th><th>second</th><th>third</th></tr>
   <tr><td>0</td><td>1</td><td>2</td></tr>
   <tr><td>3</td><td>4</td><td>3</td></tr>
   <tr><td>6</td><td>7</td><td>9</td></tr>
 </table>

的javascript / jquery的

var cPrice = $('th').filter(':contains("first")');
var cDefault = $('th').filter(':contains("third")');

cp = cPrice.index() + 1;
cd = cDefault.index() + 1;

$('table td:nth-child(' + cp + ')').filter(function () {
   //alert($(this).text());
   var temp = $(this).index() + 2;
   //alert(temp);

   return $(this).text() != $('table td:eq('+ temp +')').text();
}).addClass("boom");

CSS

th{padding:5px;}
td{text-align:center;}
.boom{color:red;}

2 个答案:

答案 0 :(得分:2)

http://jsfiddle.net/rUssu/1/

return $(this).text() != $(this).nextAll().eq(1).text();

你的选择器正在获得所有TD的临时TD而不仅仅是当前行中的TD。

答案 1 :(得分:2)

您可以单独遍历每一行,并将单元格1与单元格3进行比较,类似于:

$('table tr').each(function () {
    var $firstCell = $('td:eq(0)', this);
    var $thirdCell = $('td:eq(2)', this);

    if($firstCell.text() === $thirdCell.text()){
        $firstCell.addClass('boom');
    }
})

修改

再次查看您的代码后,我认为使用当前单元格的siblings()也应该有效,类似于:

$('table td:nth-child(' + cp + ')').filter(function () {
      return $(this).text() === $(this).siblings().eq(1).text();
}).addClass("boom");

DEMO - 将当前单元格与第二个下一个兄弟进行比较