JSFiddle - React, Tailwind, and code Playground

by Nibin George

HTML

<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="managed_table_1 ">
    <thead>
        <tr>
            <th>Date</th>
            <th>Name</th>
            <th>grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01-11-14</td>
            <td>Internet Explorer 4.0</td>
            <td>X</td>
        </tr>
        
        <tr>
            <td>02-11-15</td>
            <td>Internet Explorer 6</td>
            <td>A</td>
        </tr>
        <tr>
            <td>02-11-15</td>
            <td>Internet Explorer 7</td>
            <td>A</td>
        </tr>
       
        <tr>
            <td>12-11-14</td>
            <td>Firefox 1.0</td>
            <td>A</td>
        </tr>
       
        <tr>
            <td>15-11-14</td>
            <td>Firefox 2.0</td>
            <td>A</td>
        </tr>
        <tr>
            <td>15-11-14</td>
            <td>Firefox 3.0</td>
            <td>A</td>
        </tr>
        <tr>
            <td>18-11-14</td>
            <td>Camino 1.0</td>
            <td>A</td>
        </tr>
        
        <tr>
            <td>20-11-14</td>
            <td>Netscape 7.2</td>
            <td>A</td>
        </tr>
        <tr>
            <td>20-11-14</td>
            <td>Netscape Browser 8</td>
            <td>A</td>
        </tr>
    </tbody>
</table>
<input type="button" id="clickhere" value="Click Here" />

CSS

td{
    padding-left:20px;
    padding-top:10px;
}

.pink{
   background-color:pink; 
}

.grey{
    background-color:grey;
}

JavaScript

$('#clickhere').on('click', function () {
    $("tr").not(':first').each(function () { //loop over each row  
       var currentdate=$(this).find("td:eq(0)").text(); 
       var prevDate = $(this).prev().find("td:eq(0)").text(); 
       if(prevDate != currentdate){
                if($(this).prev().hasClass('pink')){
                    $(this).addClass('grey');
                }else{
                    $(this).addClass('pink');
                }
            }else{
                if($(this).prev().hasClass('pink')){
                    $(this).addClass('pink');
                }else{
                    $(this).addClass('grey');
                }
        }
    });
})