JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%" border="1" cellspacing="0" cellpadding="0" class="tableborder">
  <tr class="tabletitle">
    <td class="tabletitle">CheckBox</td>
    <td class="tabletitle">Title</td>
    <td class="tabletitle">Link</td>
  </tr>
  <tr class="tableodd">
    <td class="tableodd"><input type="checkbox" /></td>
    <td class="tableodd">&nbsp;</td>
    <td class="tableodd"><a class="mylink" href="javascript:void(0)">MyLink For Delete</a></td>
  </tr>
  <tr>
    <td class="tableeven"><input type="checkbox" /></td>
    <td class="tableeven">&nbsp;</td>
    <td class="tableeven"><a class="mylink" href="javascript:void(0)">MyLink For Delete</a></td>
  </tr>
  <tr>
    <td class="tableodd"><input type="checkbox" /></td>
    <td class="tableodd">&nbsp;</td>
    <td class="tableodd"><a class="mylink" href="javascript:void(0)">MyLink For Delete</a></td>
  </tr>
  <tr>
    <td class="tableeven" ><input type="checkbox" /></td>
    <td class="tableeven">&nbsp;</td>
    <td class="tableeven"><a class="mylink" href="javascript:void(0)">MyLink For Delete</a></td>
  </tr>
</table>

CSS

.tableborder
{
    padding: 2px 4px 2px 4px;
    border: 1px solid #FFFFFF;
   
}
.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
{
    /*background-color:#F5FBFB;*/
    
    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;
}
.highlight
{
    
    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:#9EC630;
    background-color:#FFFFFF;
    vertical-align:top;
}

JavaScript

$(document).ready(function()
    {
         $('td input[type="checkbox"]').live('click',function(){
             alert('sdfs');
    if($(this).attr('noclass')!='1')
    {
                    if ($(this).is(':checked')){
                        anyrowschecked=1;
                        
                          $(this).parent().addClass('highlight');
                          $(this).parent().siblings().addClass('highlight');
                    } else if($(this).parent().is('.highlight')) {
                         $(this).parent().removeClass('highlight');
                         $(this).parent().siblings().removeClass('highlight');
                    }
    }
    });
         $('td .mylink').live('click',function(){
                    var selected=$(this).parent().attr('class');
                    if(selected.indexOf("highlight")!=-1)
                    {
                                    alert('You are doing deletion.This will delete the entire data');
                            var yes= confirm("Do you really want to delete??");
                        if(yes)
                        {
                                alert("Do Whatever You want");
                        }
                    }
                    else
                    {
                            
                                    alert('Please ensure you are deleting the selected row');
                    }
       });
    });