JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<table id="table1">
    <tr>
        <td>
            <button>button 1</button>
        </td>
        <td>
            some random data
        </td>
         <td>
            <button type="button" class="delbutton">remove</button>
        </td>
    </tr>
    <tr>
        <td>
            <button>button 2</button>
        </td>
        <td>
            some random data
        </td>
         <td>
            <button class="delbutton">remove</button>
        </td>
    </tr>
    <tr>
        <td>
            <button>button 3</button>
        </td>
        <td>
            some random data
        </td>
         <td>
            <button class="delbutton">remove</button>
        </td>
    </tr>
    <tr>
        <td>
            <button>button 4</button>
        </td>
        <td>
            some random data
        </td>
         <td>
            <button class="delbutton">remove</button>
        </td>
    </tr>
</table> 
<br/>
<table id="table2">
    <tr>
        <td>
            some
        </td>
        <td>
            data
        </td>
         <td>
            <button class="delbutton">remove</button>
        </td>
    </tr>
</table>

CSS

table {width:100%;}
table tr{border:1px solid;}
#table1{border:4px solid gold!important;}
#table2{border:4px solid green!important;}
table tr:hover{background:#ccc;}
table td {padding:3px;}
table td{border-right:1px solid #000;}
button{border:2px solid #666;}

JavaScript

$(function() {
    $(".delbutton").live('click',function(){
        if(confirm("Weet je zeker dat je deze record wilt verwijderen?")){  
            $(this).parents("tr").animate({ opacity: "hide" }, "slow");   
        }
        return false;
    });
    
    if($('#table2').length) {
        $('#table2 tbody tr').live('mouseover',function(){     
            $(this).addClass('selectedRow');                                            }).live('mouseout',function(){
             $(this).removeClass('selectedRow');
        }).live('click',function(){
             var row = $(this);
             $(this).removeClass('selectedRow');
             $('#table1 tbody').append($(this).remove());
        });
        $('#table1 tbody tr').live('mouseover',function(){      
             $(this).addClass('selectedRow');                  
        }).live('mouseout',function(){
             $(this).removeClass('selectedRow');
        }).live('click',function(){
             var row = $(this);
             $(this).removeClass('selectedRow');
             $('#table2 tbody').append($(this).remove());
        });
    }
});