JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <table width="40%" border="0" class="hover">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th width="20%">Action</th>
    </th>
    <tr id="100">
      <td>Amit</td>
      <td>Patil</td>
      <td></td>
    </tr>
    <tr id="101">
      <td>Amit</td>
      <td>Patil</td>
      <td></td>
    </tr>
    <tr id="102">
      <td>Amit</td>
      <td>Patil</td>
      <td></td>
    </tr>
    <tr id="103">
      <td>Amit</td>
      <td>Patil</td>
      <td></td>
    </tr>
    <tr id="104">
      <td>Amit</td>
      <td>Patil</td>
      <td></td>
    </tr>
    <tr id="105">
      <td>Amit</td>
      <td>Patil</td>
      <td></td>
    </tr>
  </table>
 </body>

CSS

table {
     font-family: verdana;
     font-size: 12px;
   }
   table th{
      text-align: left;
      background: #D3D3D3;
      padding : 2px;       
   }
   table tr:hover{
      background: #EFEFEF;
   }
   table tr{
      text-align: left;
   }
   table td{
      padding: 5px;
   }    
   table td a{
      color: #0454B5;    
   }

JavaScript

$(document).ready(function(){
    // show buttons on tr mouseover
    $(".hover tr").live("mouseenter",function(){
        $(this).find("td:last-child").html('<a href="javascript:void(0);" onClick="editrow('+$(this).attr("id")+')">Edit</a>&nbsp;&nbsp;<a href="javascript:void(0);" onClick="deleterow('+$(this).attr("id")+')">Delete</a>');    
    });//
    
    // remove button on tr mouseleave
    $(".hover tr").live("mouseleave",function(){
       $(this).find("td:last-child").html("&nbsp;");    
    });

    // TD click event
    $(".hover tr").live("click",function(event){
       if(event.target.nodeName == "TD"){ 
           alert("You can track TD click event too....Isnt it amazing !!!");
       }
    });
});
editrow = function (itemId){
    alert("You clicked 'Edit' link with row id :"+ itemId);
}
deleterow = function (itemId){
    alert("You clicked 'Delete' link with row id :"+ itemId);
}