JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tableMod">
<tr>
    <td>campo1</td>
    <td>campo2</td>
    <td>campo3</td>
    <td>campo4</td>
</tr>
 <tr>
     <input type="button" value="Click aqui"class="click_button" onclick="callFunct()"/>
    <td>campo1</td>
    <td>campo2</td>
    <td>campo3</td>
    <td>campo4</td>
</tr>
</table>

CSS

table tr{
    width:100%;
    border:1px solid red;
    background:yellow;
    position:relative;
    border-collapse: collapse !important;
}
#tableMod{
    
    border-collapse: collapse !important;
}
.click_button{
    position: absolute;
    margin: 0 auto;
    left: 0;
    margin-left: 15%;
    
    color:white;
    background:blue;
    border:none;
    border-radius:3px;
}

JavaScript

$(document).ready(function(){
    $('#tableMod tr').live('mouseover', function () {
      $(this).css("background-color","gray");
        $("#tableMod tr .click_button").remove();
        var button = document.createElement('input');
        button.type='button';
        button.setAttribute('class','click_button');
        button.setAttribute('onclick','callFunct()');
        button.value='Click aqui';
        
        $(this).append(button);
    })
    $('#tableMod tr').live('mouseleave', function () {
      $(this).css("background-color","yellow");
        $("#tableMod tr .click_button").remove();
    })
    
    
    function callFunct(){
 alert('chamoun função');
}
})