JSFiddle - React, Tailwind, and code Playground
HTML
<button id="unqOrMsgTestFire">Check rows for redundancy</button>
<button id="spawn">Spawn lots of rows</button>
<hr/>
<p class="unique">Unique</p>|<p class="notUnique">Not Unique</p>
<hr/>
<table id="binning">
<thead>
<tr>
<th>Server</th>
<th>Channel</th>
<th>Bin Type</th>
<th>Bin Name</th>
<th>Population</th>
<th>Check</th>
</tr>
</thead>
<tbody>
<tr>
<td col="server" >Server 1</td>
<td col="channel" >Channel A</td>
<td col="type" >animal</td>
<td col="name" >cat</td>
<td col="ndocs" >15</td>
<td col="check" rowid="animalcat" ></td>
</tr>
<tr>
<td col="server" >Server 2</td>
<td col="channel" >Channel A</td>
<td col="type" >animal</td>
<td col="name" >cat</td>
<td col="ndocs" >12</td>
<td col="check" rowid="animalcat" ></td>
</tr>
<tr>
<td col="server" >Server 1</td>
<td col="channel" >Channel A</td>
<td col="type" >animal</td>
<td col="name" >dog</td>
<td col="ndocs" >12</td>
<td col="check" rowid="animaldog" ></td>
</tr>
</tbody>
</table>
CSS
/* css is irrelevant here this is just for clarity! */
#binning tbody{
color:#606060;
}
#binning td, th {
padding:4px;
border: 1px solid black;
}
.notUnique {
color: #d90000;
}
.unique {
color: #758811;
}
p {
display:inline;
}
JavaScript
$(function(){ //this is just to fire the function
$("#unqOrMsgTestFire").click(unqOrMsgTest);
$("#spawn").click(function(){
var blueprint = $("#binning tbody tr").first();
for(var i = 0; i < 1000; i++)
blueprint.clone().appendTo("#binning tbody").find('td[rowid]').attr('rowid', Math.floor(Math.random()*500));
});
});
function unqOrMsgTest() {
console.profile();
var toCheck = $("#binning > tbody > tr > td[col=check]"),
ignore = {},
curId,
currentlyProcessing,
rowsAmount,
i;
i = toCheck.length - 1;
while( i >= 0 ) {
curId = toCheck.eq(i).attr("rowid");
if( !(curId in ignore) ) {
ignore[curId] = undefined;
currentlyProcessing = $("#binning > tbody > tr > td[rowid=" + curId + "]");
rowsAmount = currentlyProcessing.length;
currentlyProcessing
.text( rowsAmount )
.parent().attr('class', rowsAmount > 1 ? "notUnique" : "unique");
}
i--;
}
console.profileEnd();
}