Geek Answers Handbook

JQuery toggles rows on click

I am trying to hide / show a subset of rows when I click a row with a specific id.

Thanks to a lot of searching on the Internet and many attempts, I got the code below.

The only problem is that this code for some reason only hides / shows the very first set of lines.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Test</title> <script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#rowToClick').click(function () { $(this).nextAll('tr').each( function() { if ($(this).is('#rowToClick')) { return false; } $(this).toggle(); }); }); }); </script> </head> <body> <table> <tr id="rowToClick"><td>ClickMe</td></tr> <tr id="Tr1"><td>Toggled</td></tr> <tr id="Tr2"><td>Toggled</td></tr> <tr id="Tr3"><td>Toggled</td></tr> <tr id="Tr4"><td>Toggled</td></tr> <tr id="Tr5"><td>Toggled</td></tr> <tr id="rowToClick"><td>ClickMe</td></tr> <tr id="Tr6"><td>Toggled</td></tr> <tr id="Tr7"><td>Toggled</td></tr> <tr id="Tr8"><td>Toggled</td></tr> <tr id="Tr9"><td>Toggled</td></tr> <tr id="Tr10"><td>Toggled</td></tr> </table> </body> </html>

Does anyone have a suggestion and / or possible rewriting of code?

---------- Update - final decision -----------

In the end, I got the solution below, based on Brandon's input, as I wanted to do more nesting with the same behavior, sort of like a resettable tree view. Unfortunately, this meant that I had to add an additional attribute to track the state, but now I can live with it until I find another way (for example, check the visibility of the next line).

  $(document).ready(function () { toggleRows('.module','.namespace'); toggleRows('.namespace','.type'); toggleRows('.type','.member'); }); function toggleRows(parentClass,subClass) { $(parentClass).click(function () { if( $(this).attr("value")=="collapsed") { $(this).attr("value","expanded"); $(this).nextUntil(parentClass).filter(subClass).toggle(true); } else { $(this).attr("value","collapsed"); $(this).nextUntil(parentClass).attr("value","collapsed"); $(this).nextUntil(parentClass).toggle(false); } }); }
+6
jquery html-table row expand
source share
6 answers

First, you cannot have multiple rows with the same identifier. Instead of setting the id to "rowToClick", set the css class:

 <tr class='rowToClick'><td>click me</td></tr>

Further, this should work:

 $(document).ready(function() { $(".rowToClick").click(function() { $(this).nextUntil(".rowToClick").toggle(); }); });
+7
source share

this is because the id attribute can only be used once for each identifier in a document. you should use the class attribute instead, and then in your jquery code, access the elements with the rowToClick class using the $ (". rowToClick") selector.

Hope this helps.

Andy

+2
source share

  • Look at this fiddle
    Using the :not() selector, you can select all tr elements that do not have the identifier / class that you want to filter:

     $('.rowToClick').click(function () { $('tr:not(.rowToClick)').toggle(); //toggle all rows on the page that //do not have the class rowToClick });

  • Please note that you cannot have two elements with the same identifier - you have two rows with id rowToClick . Use class instead.

+1
source share

I believe this is the desired behavior:

 <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <script src="Includes/JavaScript/jQuery/version1.4.4/Core/jquery-1.4.4.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { // Also, just as an extra, use "context" to limit the scope of any jQuery selector-search. // That way on large pages your selector doesn't search through the whole page, // it only searches the tables HTML. // Doing so is a short-cut for: $('#tblMyTable').find('tr.clickTrigger'); var context = $('#tblMyTable'); $('tr.clickTrigger', context).click(function() { $(this).nextAll('tr').each(function() { if ($(this).is('tr.clickTrigger')) return false; $(this).toggle(); }); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <table id="tblMyTable" cellpadding="0" cellspacing="0"> <tr class="clickTrigger"> <td>ClickMe</td> </tr> <tr id="Tr1"> <td>Toggled</td> </tr> <tr id="Tr2"> <td>Toggled</td> </tr> <tr id="Tr3"> <td>Toggled</td> </tr> <tr id="Tr4"> <td>Toggled</td> </tr> <tr id="Tr5"> <td>Toggled</td> </tr> <tr class="clickTrigger"> <td>ClickMe</td> </tr> <tr id="Tr6"> <td>Toggled</td> </tr> <tr id="Tr7"> <td>Toggled</td> </tr> <tr id="Tr8"> <td>Toggled</td> </tr> <tr id="Tr9"> <td>Toggled</td> </tr> <tr id="Tr10"> <td>Toggled</td> </tr> </table> </div> </form> </body> </html>
+1
source share

I would switch your code to something like this:

 <tr class="rowToClick" rel="1"><td>ClickMe</td></tr> <tr class="row1Collapse"><td>Toggled</td></tr> <tr class="row1Collapse"><td>Toggled</td></tr> <tr class="row1Collapse"><td>Toggled</td></tr> <tr class="row1Collapse"><td>Toggled</td></tr> <tr class="row1Collapse"><td>Toggled</td></tr> <tr class="rowToClick" rel="2"><td>ClickMe</td></tr> <tr class="row2Collapse"><td>Toggled</td></tr> <tr class="row2Collapse"><td>Toggled</td></tr> <tr class="row2Collapse"><td>Toggled</td></tr> <tr class="row2Collapse"><td>Toggled</td></tr> <tr class="row2Collapse"><td>Toggled</td></tr>

Then, something like this:

 $('.rowToClick').click(function() { var rel = $(this).attr('rel'); $('.row' + rel + 'Collapse').show(); // or hide, you get the idea });
0
source share
 <script> function padre(id){ var pa=$('.rowToClick_'+id); $(pa).nextAll('tr').each( function(){ if ($(this).is('.rowToClickEnd_'+id)) { $(this).toggle(); return false; } $(this).toggle(); }); } </script> <table> <tr class="rowToClick_1"><td><a href="javascript:padre('1')">+</a>Categoria 1</td></tr> <tr id="Tr1" class="rowToClick_1_1"><td><a href="javascript:padre('1_1')">+</a>Categoria 1_1</td></tr> <tr id="Tr1_1"><td>Categoria 1_1_1</td></tr> <tr id="Tr1_2" class="rowToClickEnd_1_1"><td>Categoria 1_1_2</td></tr> <tr id="Tr2"><td>Categoria 1_2</td></tr> <tr id="Tr3"><td>Categoria 1_3</td></tr> <tr id="Tr4"><td>Categoria 1_4</td></tr> <tr id="Tr5" class="rowToClickEnd_1"><td>Toggled</td></tr> <tr class="rowToClick"><td>ClickMe</td></tr> <tr id="Tr6"><td>Toggled</td></tr> <tr id="Tr7"><td>Toggled</td></tr> <tr id="Tr8"><td>Toggled</td></tr> <tr id="Tr9"><td>Toggled</td></tr> <tr id="Tr10" class="rowToClickEnd"><td>Toggled</td></tr> </table>
0
source share

More articles:


All Articles