Detailed Table using jQuery


We have seen in many sites regarding detailed information of products below the row when we click on the downwards arrow and collapse when click on upwards arrow.

We have many plugin's for this type of functionality we can also do with jQuery simple logic also.

I have done some R&D regarding this and want to share information of detailed table using jQuery.

We need to download the latest jQuery File from this link http://jquery.com/download/

We have many CDN links also available for directly accessing the jQuery library files.

Google :

https://developers.google.com/speed/libraries/devguide#jquery


Micro-soft :

http://www.asp.net/ajaxlibrary/cdn.ashx

Git-hub:


https://github.com/jquery/jquery


We have few utility files used for this functionality .I have attached the folder structure to maintain .Please see the below image






I have taken a student statistics as input to show the data in HTML Table format.

We need to write in jQuery to show the details of a student in detailed Table



       $(document).ready(function () {
            $("#htmlTable tr:odd").addClass("odd");
            $("#htmlTable tr:not(.odd)").hide();
            $("#htmlTable tr:first-child").show();

            $("#htmlTable tr.odd").click(function () {
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });           
        });
 
 
The end output of this script with the markup language is given below 



Hope this example  has given a basic implementation in jQuery  :-)  
Source Code  

Popular posts from this blog

Exporting to excel from a custom class object using C#.NET

Get the Clicked Cell Value and Column Name of GridView in ASP.NET

How to hide bootStrap popover when user click(s) outside the popover?