JSFiddle - React, Tailwind, and code Playground
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
var $tbody = $('#table_body');
$('#action_button').click(function () {
var $tr = $('<tr class="fresh">' +
'<td>John Doe</td>' +
'<td>235-75-75</td>' +
'<td>some text</td>' +
'<td>@#!@#!%!#%</td>' +
'</tr>');
$tbody.prepend($tr);
setTimeout(function () {
$tr.removeClass('fresh');
}, 1000);
});