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  
Location: Hyderabad, Andhra Pradesh, India

Comments

Post a Comment

Popular posts from this blog

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

We may face a scenario to export the data of custom class object to excel using InterOp .You can get the property name's from the class object using Reflection.Create a work sheet header by reading the each propety of the class object.I have created a separate method to get the all properties into a list collection of string as given below         ///         /// Get the list of Properties Name into a list collection.         ///         ///         ///         public List GetPropeties(Employee objEmployee)         {             Type myType = objEmployee.GetType();             IList props = new List (myType.GetProperties());  ...
Read more

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

Hiding bootStrap popover when user click(s) outside the popover Recently I have experienced this problem i.e., hiding the popover when we click outsode the popover.I have worked on it and fixed the issue.So,I thought to share this fix. For more detail(s) about the bootStrap please refer this link PopOver popover plugin has a property called " trigger " of type String with default event as " click " and popover can be triggered by click/hover/focus/manual.  To show the popover we need to prepare the HTML mark-up as given below < div class = " btn-group " > < div class = " btn-group " id = " ddlSelected " style = " clear: both; " > < button class = " btn btn-primary btnSelectedStyle selectedBorderStyle " type = " button " > Your selected Items ( < b id = " lblSelectedItemCount " > 0 < / b > ) < / butt...
Read more

How to Clear the Textbox Text using C#?

This is one of the common requirement we get in our projects.Text box has a wonderful method called " Clear ".This method is used to clear the text in the Text box.I have given a simple example to explain this .I have implemenetd a common method to clear the Text of few Controls .One of that is Textbox. void ClearInputs(ControlCollection ctrls) { foreach (Control ctrl in ctrls) { if (ctrl is TextBox) ((TextBox)ctrl).Text = string .Empty; ClearInputs(ctrl.Controls); } }   You can call this method where ever you want to clear the Text from the Textbox. For more information please click this link TextBox       Hope this would help the beginners. Cheers.
Read more