JSFiddle - React, Tailwind, and code Playground

by rlemon

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 data-col="server" >Server 1</td>
            <td data-col="channel" >Channel A</td>
            <td data-col="type" >animal</td>
            <td data-col="name" >cat</td>
            <td data-col="ndocs" >15</td>
            <td data-col="check" data-rowid="animalcat" ></td>
        </tr>
        <tr>
            <td data-col="server" >Server 2</td>
            <td data-col="channel" >Channel A</td>
            <td data-col="type" >animal</td>
            <td data-col="name" >cat</td>
            <td data-col="ndocs" >12</td>
            <td data-col="check" data-rowid="animalcat" ></td>
        </tr>
        <tr>
            <td data-col="server" >Server 1</td>
            <td data-col="channel" >Channel A</td>
            <td data-col="type" >animal</td>
            <td data-col="name" >dog</td>
            <td data-col="ndocs" >12</td>
            <td data-col="check" data-rowid="animaldog" ></td>
        </tr> 
        <tr>
            <td data-col="server" >Server 1</td>
            <td data-col="channel" >Channel A</td>
            <td data-col="type" >animal</td>
            <td data-col="name" >cat</td>
            <td data-col="ndocs" >15</td>
            <td data-col="check" data-rowid="animalcat" ></td>
        </tr>
        <tr>
            <td data-col="server" >Server 2</td>
            <td data-col="channel" >Channel A</td>
            <td data-col="type" >animal</td>
            <td data-col="name" >cat</td>
            <td data-col="ndocs" >12</td>
            <td data-col="check" data-rowid="animalcat" ></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 check_unique(row, collection) {
    var unique = true, rowid = $(row).children('td[data-col=check]')[0].getAttribute('data-rowid');
    collection.each(function() {
        if( $(this).children('td[data-col=check]')[0].getAttribute('data-rowid') == rowid ) {
            unique = false; 
        }
    });
    return unique;
}
    
function unqOrMsgTest() { 
//there MUST be a better way to do this... it becomes quite slow for large tables TODO

    var collection = $("#binning tbody").children('tr');
        
    collection.each(function(i, el){
        el.className += check_unique( el, collection.not(el) ) ? ' unique' : 'notUnique';
    });            

}