JSFiddle - React, Tailwind, and code Playground

by Mils

HTML

<table  class="tab" id="tab" border="1">
    <tr> <th>Title</th> </tr>
</table> 
</br>
<!-- Example2 -->
<table  border="1">
    <tr> <th>Title2</th> </tr>
    <tr> <td id="td1">empty</td> </tr> 
</table>

CSS

td{
    width:200px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2C3038), to(#2C3038), color-stop(.0,#E0E0E0));
}

JavaScript

var table = document.getElementById("tab");
    var rowCount = table.rows.length;

 
 for(var i=0;i<6;i++) {     
    row = table.insertRow(rowCount);
    row.id = "row"+i;
    cell1 = row.insertCell(0);
    var content = document.createElement("output");                
    content.innerHTML = i ;
    cell1.appendChild(content);
    rowCount++;
   }


     $(document).ready(function(){
            $('td').each(function(i) {     
                 $('#tab').on('click', '#row'+i, function(){
                    document.getElementById("row"+i).style.background = 'white';
                     //alert(i);
                 });   
            });   
         
         //example2
         $('#td1').on('click', function(){
                    document.getElementById("td1").style.background = 'white';
                     //alert(i);
                 });   
     });