Wednesday, August 20, 2014

Merge Multiple Tables into single table using jQuery

This is very simple script used to merge tables.
append() method insert elements at the end of the selected content.
prepend() method insert elements starting of the selected content.

In this example i have used both append() and prepand() methods.




Add tables at Last:
Add tables at First:
Need library file to perform this action.Please copy and Paste below library file.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>


Add tables at Last:

Jquery Function

<script type="text/javascript">
        $(function() {
            $('#Merge').click(function() {
                $('#tbl1 > tbody:last').append($('#tbl2 > tbody').html());
                $('#tbl1 > tbody:last').append($('#tbl2 > tbody').html());
                $('#tbl2').remove();
                $('#tbl3').remove();
            });
        });
    </script>

remove() method removes data for selected elements.

Add tables at First:

Jquery Function

<script type="text/javascript">
    $(function() {
        $('#Merge').click(function() {
            $('#tbl1 > tbody:first').prepend($('#tbl2 > tbody').html());
            $('#tbl1 > tbody:first').prepend($('#tbl3 > tbody').html());
            $('#tbl2').remove();
            $('#tbl3').remove();
        });
    });
</script>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

No comments:

Post a Comment