Question

我最多有三个几乎相同的div，其中包含用户名表。一些名称可能会在三个div中重复出现。我想强调重复的名字。第一次出现的用户不应该着色，第二次出现应该有橙色背景，第三次出现应该有红色背景。 div按顺序从左到右依次排列，因此第一个div不应该有任何突出显示的用户名。

我的HTML看起来像：

<div class="col-md-4">
    <table class="table table-striped">
        <tr>
            <th>2/26/2014</th>
        </tr>
        <tr>
            <td>user1</td>
        </tr>
        <tr>
            <td>user2</td>
        </tr>
        <tr>
            <td>user5</td>
        </tr>
        <tr>
            <td>user17</td>
        </tr>
    </table>
</div>

<div class="col-md-4">
    <table class="table table-striped">
        <tr>
            <th>2/27/2014</th>
        </tr>
        <tr>
            <td>user13</td>
        </tr>
        <tr>
            <td>user5</td>
        </tr>
        <tr>
            <td>user7</td>
        </tr>
    </table>
</div>

<div class="col-md-4">
    <table class="table table-striped">
        <tr>
            <th>2/28/2014</th>
        </tr>
        <tr>
            <td>user5</td>
        </tr>
        <tr>
            <td>user45</td>
        </tr>
        <tr>
            <td>user1</td>
        </tr>
    </table>
</div>

我知道将使用$('table.table td')选择用户名表格单元格（如果我使用jQuery）但我不确定该怎么做。

如果您有任何疑问，请与我们联系。

谢谢。

Answer 1

这是你想要的吗？

enter image description here

我创建了一个存储文本匹配对的地图。每次重复文本时，与其关联的计数器都会递增。如果计数器爬升到某个值，背景将设置为另一种颜色。试一试！

DEMO

var map = new Object();

$('td').each(function() {
    var prop = $(this).text()
    var bgColor = '#FFFFFF';

    if (map[prop] > 1) {
        bgColor = '#FF0000';
    } else if (map[prop] > 0) {
        bgColor = '#FF7F00';
    }

    $(this).css('background', bgColor);

    if (map.hasOwnProperty(prop)) {
        map[prop]++;
    } else {
        map[prop] = 1;
    }
});

Answer 2

你可以尝试这样的东西，但我没有测试它

$('td').each(function(){
  var text = this.html();
  $('td:contains("'+text+'"):nth-child(2)').css({'background':'orange'});
  $('td:contains("'+text+'"):nth-child(3)').css({'background':'red'});
});

修改

不是特别优雅但似乎有效

http://jsfiddle.net/63L7L/1/

var second = [];
var third = [];
$('td').each(function(){
  var text = $(this).html();
  second.push($("td").filter(function() {
    return $(this).text() === text;
 })[1])
   third.push($("td").filter(function() {
   return $(this).text() === text;
 })[2])
}); 

  $(second).each(function(){
   $(this).css({'background':'red'});
  });

  $(third).each(function(){
  $(this).css({'background':'orange'});

});

Answer 3

使用纯Javascript（ECMA5）

CSS

.orange {
    background-color:orange;
}
.red {
    background-color:red;
}

的Javascript

Array.prototype.forEach.call(document.querySelectorAll('.table-striped td'), function (td) {
    var textContent = td.textContent;

    if (this.hasOwnProperty(textContent)) {
        td.classList.add(++this[textContent] === 2 ? 'orange' : 'red');
    } else {
        this[textContent] = 1;
    }
}, {});

在jsFiddle

上

突出显示重复的字符串

3 个答案: