突出重复字符串

我最多有三个几乎相同的div包含用户名表。有些名字可能在三个div中重复。我想强调重复的名称。用户的第一次出现不应该着色，第二次出现应该有橙色背景，第三次应该有红色背景。 divs从左到右依次排列，以便第一个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），但我不知道从那里做。

如果您有任何问题，请让我知道。

谢谢。

来源

2014-03-04 585connor

你可以发布你的任何当前代码，你有问题，所以我们可以看看为什么它可能不工作？我假设你至少有一些基本的代码循环通过divs /表或类似的？ – Nope

这就是我必须展示的，实际上。我不知道如何循环遍历每个表格并比较内容。 – 585connor

我相信我弄明白了。在下面检查我的答案。谢谢。 –

这是你吗想？

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; 
    } 
});

来源

2014-03-04 23:37:19

谢谢！这工作 – 585connor

+1多数民众赞成真棒 – andrew

你可以尝试这样的事情，但我没有测试它

$('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'}); 

});

来源

2014-03-04 23:17:56 andrew

就是这样的：'var text = $（this）.text（）;'不，它不起作用。 –

是的，这似乎不起作用。 – 585connor

请参阅编辑 – andrew

使用纯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

来源

2014-03-05 00:07:29 Xotic750

突出重复字符串

回答

相关问题