i have table rows inside a table, and also another nested table rows inside each row, my problem is i can collapse and expand in the nested table rows, but when i try to expand in the main table, only the first row is expanded the rest ones are expanded by default when i launch the program, how can i fix it. this is my code
Make a table where each row is clickable to show a hidden sub-content (left side) and / or to navigate with clickable buttons (right).
bootstrap collapse component stylish buttons We must therefore integrate bootstrap collapse component and stylish buttons.
Bad Idea with table
Step 1 : table
it is the one bootstrap offers us a simple table Nothing to say is the most logical solution, because it is the one bootstrap offers us a simple table.
1MarkOtto@mdo2JacobThornton@fat
Step 2 : table + collapse
bootstrap the doc with only data-target and collapse You must use the bootstrap the doc with only data-target and collapse.
Problem: a click on a button causes a side effect of expand/collapse the container row. It’s bad when you click for a new tab/window on the details button to displays, because it will activate the accordion effect on the current row (example: click on edit).
Solution: you must prevent the expand/collapse from triggering when a button is clicked. It is therefore necessary to assign the click to expand each cell rather than on the TD TR tags.
It works BUT JavaScript lags on expanding/collapsing when there are dozens of roww and sub-rows on the page and there are duplicate code.
I currently use the DIV version. With TABLE, fhe final page was not reactive enough, the source code was duplicated, and there were a lot of bugs/maintenance and technical solution TABLE was not always understandable, even with the doc bootstrap support.
How to implement expand/collapse in HTML table rows using jQuery
This jQuery tutorial, we will discuss how to implement expand/collapse in an HTML table rows using jQuery. Users can click on the expand button, which will display rows inside that. Similarly, when the user clicks on the collapse button, the HTML table rows will be collapsed.
There are two ways, we can implement expand/collapse in HTML table rows using jQuery.
Implement expand/collapse in HTML table rows using jQuery
A common UI will have an HTML table of data rows. When we click on “Expand”, it shows a detailed breakdown of “child” rows below the “parent” row. In a parent row, click on the “+” sign; it expands the child row with detailed information. At the same time, the parent sign toggles to “- “.
Once we click on “- “sign, then it will collapse child rows with parent sign “+”.
Put a class of “parent” on each parent row (tr).
Give each parent row (tr) an attribute “data-toggle=”toggle””.
Give each child row cover under a >If you want to use the below code in a classic SharePoint page, then you can write the code inside a content editor or script editor web part.
Below is the sample of the HTML table structure.
+Technology
4
Below is the script code to expand/collapse in HTML table rows:
The output will appear like below:
Implement expand/collapse in HTML table rows using jQuery
A common UI which will have an HTML table of record rows, in which when we click on “Expand”, it shows a detailed breakdown of “child” rows below the “parent” row.
Add a class of “parent” on each parent row (tr).
Give each parent row (tr) an id.
Give each child row a class of “child-ID” where ID is the id of the parent tr that it belongs to.
ID
Name
Total
123
Bill Gates
100
2018-01-02
A short description of Microsoft revenue
15
2018-02-03
Another New Project description
45
2010-03-04
More New Stuff
40
456
Bill Brasky
50
2009-07-02
A short Two Describe a Third description
10
2008-02-03
Another New story description
20
2009-03-04
More story Stuff
20
789
Phil Upspace
75
2008-01-02
A short New Games description
33
20011-04-03
Another Games description
22
20011-04-04
More Games Stuff
20
Below is the script code to implement expand/collapse in HTML table rows using jQuery:
You can check the output will appear like below:
You may like the following jQuery tutorials:
In this tutorial, we learned how to implement expand/collapse in HTML table rows using jQuery.
I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.
I want to expand and collapse table rows when header columns is clicked. I only want to expand/collapse rows which are under the specific header (clicked). Here is my table structure:
Header
data
data
data
data
Header
date
data
data
data
data
data
Any thoughts on how can I accomplish this task. Using div this task seems quite simple, but I have tabular data which I want to manipulate. One idea I can think of is to use css class in every row which distinguish rows in under each header and use JQuery to expand/collapse those rows only when header is clicked. But if my table has 10-15 headers then it seems difficult to keep track of css classes. Please suggest a suitable way to achieve this.
While you can have multiple tbody elements I’m pretty certain that you can only have one thead element, so I’m not sure that would help. I have, though, posted an answer which I think meets your needs. Though it does involve adding a class-name to the tr elements that contain a header.
7 Answers 7
Give a class say header to the header rows, use nextUntil to get all rows beneath the clicked header until the next header.
JS
Html
Header
data
data
data
data
Demo
$('.header').click(function()< $(this).find('span').text(function(_, value)); $(this).nextUntil('tr.header').slideToggle(100); // or just use "toggle()" >);
Demo
You can also use promise to toggle the span icon/text after the toggle is complete in-case of animated toggle.
Or just with a css pseudo element to represent the sign of expansion/collapse, and just toggle a class on the header.
Just to complement, .toggle() works better than .slideToggle(100); when there are many lines to toggle.
The easiest way to achieve this, without changing the HTML table -based structure, is to use a class-name on the tr elements containing a header, such as .header , to give:
Header
data
data
data
data
Header
date
data
data
data
data
data
// bind a click-handler to the 'tr' elements with the 'header' class-name: $('tr.header').click(function()< /* get all the subsequent 'tr' elements until the next 'tr.header', set the 'display' property to 'none' (if they're visible), to 'table-row' if they're not: */ $(this).nextUntil('tr.header').css('display', function(i,v)< return this.style.display === 'table-row' ? 'none' : 'table-row'; >); >);
In the linked demo I’ve used CSS to hide the tr elements that don’t have the header class-name; in practice though (despite the relative rarity of users with JavaScript disabled) I’d suggest using JavaScript to add the relevant class-names, hiding and showing as appropriate:
// hide all 'tr' elements, then filter them to find. $('tr').hide().filter(function () < // only those 'tr' elements that have 'td' elements with a 'colspan' attribute: return $(this).find('td[colspan]').length; // add the 'header' class to those found 'tr' elements >).addClass('header') // set the display of those elements to 'table-row': .css('display', 'table-row') // bind the click-handler (as above) .click(function () < $(this).nextUntil('tr.header').css('display', function (i, v) < return this.style.display === 'table-row' ? 'none' : 'table-row'; >); >);
I expanded one of the answers, however my functionality is a bit different. In my version, different rows form different groups. And «header» row triggers collapsing/expanding of that particular group. Also, each individual subgroup memorizes state that its in. It might sound a bit confusing, you can test drive my version using jsfiddle. Hope this code snippets will be helpful to someone out there!
How to implement collapsible table rows in Javascript?
when I press on the + sign. Are there any JavaScript libraries that could help me do such a thing, or is there some magic native command that could do it for my easily?
4 Answers 4
Put each section in a different tbody element, each with an id attribute. Make the first row of each tbody a single header cell (th with the appropriate colspan) with your section header text and an anchor to #the_tbody_id. Then:
Or, for non-partial-CSS3 browsers, add Javascript to hide the non-first rows in each of those tbodys (eg, loop through tablelement.getElementsByTagName(«tbody»)), and hook the anchor to toggle their display property on click (eg, loop through tbodyelement.getElementsByTagName(«tr»)).
Setting display on table rows is tricky. What do you set the display property to when you want to display the tr? block? Heh. A TR is not a block level element.
No, you would set it to ‘table-row’ if you were setting it. But you obviously don’t have to. Toggle the .style.display property between the values ‘none’ and ».
Dojo and Jquery both can do this for you, but in case you don’t want to use a javascript library this isn’t hard with just plain JavaScript. Use an onclick event handler for the +/- toggle, write a function that is executed which sets a block element (one of your sets of rows) to display:none (a css rule). If you’re going to use a table to display this, don’t try to dynamically hide or show table rows, it doesn’t work well.
