Expanding and collapsing table row (tr) using jquery
|
11:49 PM |
No comments |
Expanding and collapsing table row (tr) using jquery
I have a table with active and inactive items. This table is dynamically populated from database. I am trying to add a toggle for only inactive items in my table and display all active items. I mean I want to show all active items and slide toggle only inactive items in my table.
Id From Action State time 1025973 SYSTEM false Active 2014-09-23T00:59:26.92 1025974 SYSTEM false Active 2014-09-23T00:59:26.92 1025974 SYSTEM false InActive 2014-09-23T00:59:26.92 1025974 SYSTEM false InActive 2014-09-23T00:59:26.92 1025974 SYSTEM false Active 2014-09-23T00:59:26.92
$('.alertRow.InActive').Parent.click(function () { $(this).nextUntil('tr.td.InActive').slideToggle(1000); }); How can I do that..?
Answer by Dan-Nolan for Expanding and collapsing table row (tr) using jquery
You had a couple problems with your selectors:
$('.alertRow .InActive').parent().click(function () { $(this).slideToggle(1000); }); This should work the way you intended.
Unfortunately, as far the animation of the slideToggle is concerned, tables tend to have a restricted style to them. In this case the slideToggle will not animate due to the line-height of the tr elements. You could set the tr line-height and height properties manually in the CSS, but it might cause you some other formatting pain in the future. Here's an example fiddle.
Answer by angusf for Expanding and collapsing table row (tr) using jquery
As mentioned in a previous post, you will need to set the line-height and height style properties of the tr tag for the animation effects to work.
Here is an example that toggles all 'InActive' rows using a button.
CSS:
tr { height: 15px; line-height: 0px; } HTML:
Id From Action State time 1025973 SYSTEM false Active 2014-09-23T00:59:26.92 1025974 SYSTEM false Active 2014-09-23T00:59:26.92 1025974 SYSTEM false InActive 2014-09-23T00:59:26.92 1025974 SYSTEM false InActive 2014-09-23T00:59:26.92 1025974 SYSTEM false Active 2014-09-23T00:59:26.92
JS:
$('#btnShowHide').click(function () { $('.InActive').parent('tr').slideToggle(1000); }); Answer by Wissam El-Kik for Expanding and collapsing table row (tr) using jquery
Here's the code to toggle the table rows which are "inactive". It's better to rely on "closest()" than "parent()" or "parents()", because it's faster and it makes more sense to use it in this case.
$(document).ready(function() { // Save all the inactive rows var inactive_rows = ''; $('.InActive').closest("tr").each(function() { inactive_rows += ''; inactive_rows += $(this).html(); inactive_rows += ''; }); console.log(inactive_rows); // Save all the active rows var active_rows = ""; $('.Active').closest("tr").each(function() { active_rows += ''; active_rows += $(this).html(); active_rows += ''; }); // Empty the table $('.alertsList').html(""); // Load the new table var table_html = ''; table_html += active_rows; table_html += inactive_rows; table_html += 'Id From Action State time
Toggle Inactive Rows'; $('.alertsList').append(table_html); // Hide the inactive rows when the page loads $('.InActive').closest("tr").hide(); // Toggle the inactive rows $('.toggleInactiveRows').click(function() { $('.InActive').closest("tr").slideToggle(); return false; }); }); Id From Action State time 1025973 SYSTEM false Active 2014-09-23T00:59:26.92 1025974 SYSTEM false Active 2014-09-23T00:59:26.92 1025974 SYSTEM false InActive 2014-09-23T00:59:26.92 1025974 SYSTEM false InActive 2014-09-23T00:59:26.92 1025974 SYSTEM false Active 2014-09-23T00:59:26.92
Toggle Inactive Rows Answer by T J for Expanding and collapsing table row (tr) using jquery
First of all, Jquery doesn't properly handle height animations on table elements, So we'll inject
Secondly, Since you want to toggle the inactive items as a group, We should group them together.
We'll find the inactive rows using
has()method, wrap them in ausingwrapAll()and insert it before the, for which we useinsertBefore().I'm using
insertBefore()since it is the better practice due to the advantage mentioned in this answer. We can useinsertAfter()as well, since it is semantically okay to include theafter the,Then we find the
's inside them and wrap their content in a hiddenusingwrapInner()method.You can avoid this step by populating the table accordingly in serverside
We then add the option for toggling before the first inactive row.
on click of the toggle option, we use
closest()to access it's parentand thennextAll()to target all the following- which are inactive. We then find theslideToggle()for the toggle
We can use parent() as well for accessing the parent
We can use siblings() as well for accessing the following
Note that we need to delegate the event handler using on() since we're injecting the toggle option dynamically.
Finally we use the CSS pseudo element ::before to display the corresponding icon based on a class, which is toggled when the user clicks the toggle option using toggleClass()
Other than these,
- I've wrapped the title columns inside
- I've set a minimum width for the
State column when the visibility of all Inactive items are toggled - I've removed the empty
We end up with the following semantically cool structure which is collapsible:
title Toggle Switch Collapsible content body content
$('.alertRow').has(".InActive") // group them together in a tfoot and insert it before tbody .insertBefore(".alertsList table tbody").wrapAll("") // inject the hidden divs inside the columns for animating .find("td").wrapInner("
*{ margin:0; padding:0; } th,td{ min-width:80px; text-align:center; } .toggle{ background:dodgerblue; } .toggle::before{ content:"+" } .toggle.expanded::before{ content:"-" } tfoot tr{ background:#eee; }
Id From Action State time 1025973 SYSTEM false Active 2014-09-23T00:59:26.92 1025974 SYSTEM false Active 2014-09-23T00:59:26.92 1025974 SYSTEM false InActive 2014-09-23T00:59:26.92 1025974 SYSTEM false InActive 2014-09-23T00:59:26.92 1025974 SYSTEM false Active 2014-09-23T00:59:26.92
Answer by D.T. for Expanding and collapsing table row (tr) using jquery
A simple solution for this would be, Bind the data in a fashion that the active ones comes first and then the inactive ones (use sorting for the same).
If it is not possible, then probably you can use below code for sorting them (FYI this would work only for those elements which are already present in the DOM and should be run only once)
// a simple compare function, used by the sort below var compare_rows = function(a, b) { var a_val = $(a).find('td.Active').text().toLowerCase(); var b_val = $(b).find('td.InActive').text().toLowerCase(); if (a_val > b_val) { return 1; } if (a_val < b_val) { return -1; } return 0; }; // the actual sort $('#tableID tr').sort(compare_rows).appendTo('#tableID');
Then add the Icon for collapsing and Expanding Hidden ones
$("Show Hidden Icons").insertBefore($($(".alertsList table tr td.InActive")[0]).parent())
At last, add the click even for the dynamic icon added as below,
$(".toggle").click(function(){ $(this).nextAll().slideToggle(1000); });
Hope this helps :)
Answer by LeGEC for Expanding and collapsing table row (tr) using jquery
As T J said in his answer, it is complicated to animate the height of a table row (see this answer or this answer for hacks around it, which involve wrapping each cell's content in a
). You could skip the animation altogether, and simply hide or show the inactive rows :
$('#btnToggle').click(function() { $('td.InActive').closest('tr').toggle(); });
If you want some visual candy to signal the hiding to the user, I would suggest using .fadeToggle() which will work straight away :
$('#btnToggle').click(function() { $('td.InActive').closest('tr').fadeToggle(1000); });
As an extra note : if you can modify the code that generates the table (e.g. : the PHP or ruby (or wathever) code), try putting the active / inactive class on the row (the
... ... ... ... ... Id From Action State time
This would make for easier rules in your css and js :
//css tr.inactive {font-style: italic; background-color: #eee} //js $('tr.inactive').fadeToggle(1000);
Answer by Alex Char for Expanding and collapsing table row (tr) using jquery
I create this using fadeToggle:
$("table tr td.InActive").each(function(){ $(this).parent().children(":not(:first-child)").hide(); }); $('a').click(function () { $(this).text() == "+" ? $(this).text("-") : $(this).text("+"); $(this).parents("tr").children(":not(:first-child)").fadeToggle(); });
a{ text-decoration: none; } a:hover{ text-decoration: underline; }
Aa you can see i added a +/- a element to show/hide inactive rows.
Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 71
0 comments:
Post a Comment