JSFiddle - React, Tailwind, and code Playground
HTML
<button id="unqOrMsgTestFire">Check rows for redundancy</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>
<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>
<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>
<tr>
<td col="server" >Server 1</td>
<td col="channel" >Channel A</td>
<td col="type" >animal</td>
<td...
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
$(document).ready(function(){ //this is just to fire the function
$("#unqOrMsgTestFire").click(function(){
unqOrMsgTest();
});
});
function unqOrMsgTest() {
var rows = $("#binning tbody").children('tr');
var totalRows = rows.length;
var idLookup = {};
var i, rowId, resultClass, checkColumn, rowCount, row;
// loops through all rows, convert to jQuery objects and track the IDs
for (i = 0; i < totalRows; i++)
{
row = $(rows[i]);
rowId = row.children('td[col="check"]').attr("rowid");
rows[i] = row;
idLookup[rowId] = (rowId in idLookup) ? idLookup[rowId] + 1 : 1;
}
// loop through each row and check them for redundancy
for (var i = 0; i < totalRows; i++ )
{
// grab row identifer to check against the id lookup
row = rows[i];
checkColumn = row.children('td[col="check"]');
rowId = checkColumn.attr("rowid");
//this bit of logic picks a class to assign rows
rowCount = idLookup[rowId];
resultClass = rowCount < 2 ? "unique" : "notUnique";
//apply the row class and print the redundancy number into td
checkColumn.text(rowCount);
row.attr("class", resultClass);
};
}