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  

Comments

Popular posts from this blog

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

Why Dispose() is preferred than Finalize() for Un-Managed Resources in .NET?

How to apply watermark to the textbox and dropdownlist?