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>
</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
$(document).ready(function() { //this is just to fire the function
$("#unqOrMsgTestFire").click(function() {
unqOrMsgTest();
});
});
function unqOrMsgTest() {
// Store counts here
var rowIdCnt = {};
// loop through check tds
$("#binning tr td[col=check]").each(function() {
// grab row identifer to check against other rows
var rowId = $(this).attr("rowid");
if (rowId in rowIdCnt) {
rowIdCnt[rowId]++;
} else {
rowIdCnt[rowId] = 1;
}
});
$.each(rowIdCnt, function(rowId, cnt) {
//this bit of logic picks a class to assign rows
var resultClass = "notUnique";
if (cnt < 2) {
resultClass = "unique";
}
//apply the row class and print the redundancy number into td
$('#binning tr td[rowid='+rowId+']').text(cnt).parent().addClass(resultClass);
});
}