aspx Tutorial

NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services,
Advertise Here

Toolbar

Get our toolbar!

Advertize



Posted by Aamir Hasan   on Tuesday, November 29, 2011 Total Views:  

This example demonstrates how to combine three tables using jQuery. Once I have asked to merge multiple tables into a single table. All columns of the tables are equal.

Here’s an example

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function(){

            $("#table1 > tbody:last")

            .append($("#table2 > tbody").html())

            .append($("#table3 > tbody").html());

            $("#table2").remove();

            $("#table3").remove();

 

        });

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <table id="table1" border="1">

            <tbody>

             <tr><th>Name</th><th>Gender</th></tr>       

             <tr><td>Aamir Hasan 1</td><td>Male</td></tr>       

             <tr><td>Aamir Hasan 1</td><td>Male</td></tr>       

             <tr><td>Aamir Hasan 1</td><td>Male</td></tr>

            </tbody>

        </table>

   

        <table id="table2" class="childtable" border="1">

            <tbody>                 

             <tr><td>Aamir Hasan 2</td><td>Male</td></tr>       

             <tr><td>Aamir Hasan 2</td><td>Male</td></tr>       

             <tr><td>Aamir Hasan 2</td><td>Male</td></tr>

            </tbody>

        </table>

      

        <table id="table3" class="childtable" border="1">

           <tbody>                 

             <tr><td>Aamir Hasan 3</td><td>Male</td></tr>       

             <tr><td>Aamir Hasan 3</td><td>Male</td></tr>       

             <tr><td>Aamir Hasan 3</td><td>Male</td></tr>

            </tbody>

        </table>

    </div>

    </form>

</body>

</html>

Output

Download

Merging-three-tables-with-jquery.zip (1.17 kb)

See live Demo

Category: All | asp.net | HTML | jQuery
Protected by Copyscape Online Plagiarism Tool

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5