Jquery Removing a Table Row and Updating Backgrounds

Jquery Removing a Table Row and Updating Backgrounds

This tutorial will show you you can remove a table row from the page and update the alternating background colors.

Until every programming language makes almost as much sense to your first speaking language, you may want to go thorugh the code below and translate it so that you can understand the process. Well, I will even help you with that this time.

Okay, once the submit button with the ‘contacted’ class is clicked, the function does its thing. The submit button exists in each table row. Therefore, the next line basically says remove this submit button’s first table row parent. That will remove the row and that includes the button you just clicked.

Since the original row above could have a blue background and the one below a blue background, the page could look ‘yucky’ since there won’t be that nice alternating color scheme. Well, not worry because the next two lines of code give each even and odd row a new background color so that everything stays nice and uniform.

<script type="text/javascript">
    $('.contacted').click(function () {

        $(this).parents("tr").first().remove();

        /*
         Toggle table rows
         */

        $("tr:even").css("background-color", "#fff");
        $("tr:odd").css("background-color", "#E2E4FF");

    });

</script>

January 12, 2015 by kent