html table with jquery tutorial manipulate

How to add, delete rows of a HTML table with jQuery

DEMO

SetColor();
$('body').on('hover', 'tr', function () {
    $(this).css('background-color', '#FFEFC6');
    console.log('tr hover');
}, function () {
    console.log('tr hover out');
    SetColor();
});
// Remove table row after clicking table row delete button
$("body").on("click", ".remove", function () {
    RemoveTableRow(this);
});
// how to get selected row value using jquery
$('.select').click(function () {
    console.log('Select Table Row And Column');
    SelectTableRow(this);
});
// html table odd even row color
function SetColor() {
    $("tr:odd").css("background-color", "#eee");
    $("tr:even").css("background-color", "#ddd");
}
// Dynamically add and delete html table row on user click 
function RemoveTableRow(element) {
    var tr = $(element).closest('tr');
    tr.css("background-color", "#FF3700");
    tr.fadeOut(400, function () {
        tr.remove();
        console.log('tr Remove [x]');
        SetColor();
    });
    return false;
}
// How to get a table cell value using jquery
// get table row and column index jquery
function SelectTableRow(element) {
    var myCol = $(element).closest('td').index() + 1;
    var myRow = $(element).closest('tr').index() + 1;
    console.log('Row: ' + myRow + ', Column: ' + myCol);
}
// How to insert row at end of table
function AddRowBottom() {
    $('table').append($('table tbody tr:last').clone().hide().fadeIn(1000));
    SetColor();
}
// How to insert row at top of table
function AddRowTop() {
    $('table').prepend($('table tbody tr:last').clone().hide().fadeIn(1000));
    SetColor();
}

DEMO