Insert Row
HTML...
<table id="tbl">
<tbody>
<tr>
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
</tr>
</tbody>
</table>
CSS...
td {
background-color: white;
}
tr:nth-child(odd) td{
background-color: #999;
}
tr td:hover {
-webkit-transition-property: background;
-webkit-transition-duration: 1s;
-moz-transition-property: background;
-moz-transition-duration: 1s;
transition-property: background;
transition-duration: 1s;
background-color: red;
}
JavaScript
$(document).ready(function() {
$("#insertRow").click(function() {
var tbl = document.getElementById('tbl'),
newRow = tbl.rows[0].cloneNode(true);
tbl.rows[0].parentNode.insertBefore(newRow, tbl.rows[0]);
});
});