JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr class='tabletitle'>
      <td class='tabletitle'>Check/Uncheck</td>
    <td class='tabletitle'>Content1</td>
    <td class='tabletitle'>Content2</td>
  </tr>
  <tr class='tableeven'>
    <td class='tableeven'><input type="checkbox" /></td>
    <td class='tableeven'>1</td>
    <td class='tableeven'>2</td>
  </tr>
  <tr class='tableodd'>
    <td class='tableodd'><input type="checkbox" /></td>
    <td class='tableodd'>1</td>
    <td class='tableodd'>2</td>
  </tr>
</table>

CSS

.tabletitle
{
    
    background:none repeat scroll 0 0 #9EC630;
border-color:#FFFFFF;
border-style:solid;
border-width:1px 1px 1px 0;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
height:20px;
padding-left:5px;
text-align:center;
vertical-align:bottom;
width:150px;
}

.tableodd
{
    
    font-size: 12px;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-style:none solid solid none;
    border-width:1px 1px 1px 0px;
    border-color:#FFFFFF;
    background-color:#E3EEC4;
    vertical-align:top;
}
.tableeven
{
    
    font-size: 12px;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-style:none solid solid none;
    border-width:1px 1px 1px 0px;
    border-color:#FFFFFF;
    background-color:#d3E3A4;
    vertical-align:top;
}

JavaScript

$(document).ready(function()
{
    $('tr').click(function(){
                                         
          var row = $(this).parent().children().index($(this));
         
        
          alert('Row: ' + row);
        
       

          
        });
});