JSFiddle - React, Tailwind, and code Playground

by anarnold

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() { 
//there MUST be a better way to do this... it becomes quite slow for large tables TODO

    // loop through each row and check them for redundancy
    $("#binning tbody").children('tr').each(function(){
        
        // grab row identifer to check against other rows        
        var rowId = $(this).children('td[col="check"]').attr("rowid");     
        
        // declare counter variable
        var tRowCount = 0;
        
        //loop through each row again and to see how many are redundant to the current row
        $("#binning tbody").children('tr').each(function(){
            if ($(this).children('td[col="check"]').attr("rowid") == rowId){
                //increment counter variable if redundant
                tRowCount++;                
            }
        });
        
        //this bit of logic picks a class to assign rows        
        var resultClass = "notUnique";
        if (tRowCount < 2){
            resultClass = "unique";
        }
        
        //apply the row class and print the redundancy number into td
        $(this).children('td[col="check"]').text(tRowCount);
        $(this).attr("class", resultClass);
        
    });            

}