JSFiddle - React, Tailwind, and code Playground

by zzaebok

HTML

<button id="action_button">add a row</button>
<table>
    <tbody id="table_body">
        <tr>
            <td>John Doe</td>
            <td>235-75-75</td>
            <td>some text</td>
            <td>@#!@#!%!#%</td>
        </tr>
    </tbody>
</table>

CSS

table td {
    border: 1px solid #2e2e2e;
}
.fresh {
    background: #1ABC9C !important;
}

JavaScript

$('#action_button').click(function(){
    var tbody = $('#table_body').prepend(''+
        '<tr class="fresh">'+
            '<td>John Doe</td>'+
            '<td>235-75-75</td>'+
            '<td>some text</td>'+
            '<td>@#!@#!%!#%</td>'+
        '</tr>');
    
    setTimeout(function(){
        tbody.children('tr:first-child').removeClass('fresh');
    }, 1000);
    
});