I am using jQuery and trying to find the row in a table in a table

Here is my code sniplet.

<table id="PasTable" class="tablesorter" border="1">
      <thead>
            <tr>
               <th class="showHideDetails">+</th>
               <th scope="col"><label class="sizeS field data-sort">Pickup#</label></th>
               <th scope="col"><label class="sizeS field data-sort">Status</label></th>
         </tr>
      </thead>
      <tbody>
            <tr class="trPas">
               <td name="name1" id="id1" class="showHideDetails">+</td>
               <td>73498325</td>
               <td>A</td>
               <td>WALMART A</td>
         </tr>
         <tr class="trPasInnerTable">
               <td colspan="1"></td>
               <td colspan="9">
                     <div id="pasRow1" name="pasRow1">
                           <table id="table1" name="table1">
                                 <tr class="PasInnerTable">
                                       <td class="PasInnerTableBlue">Shp Acct code 1:</td>
                                       <td class="PasInnerTableBlue">123456</td>
                                 </tr>
                                 <tr class="PasInnerTable">
                                       <td class="PasInnerTableGray">Origin Zip:</td>
                                       <td class="PasInnerTableGray">64110</td>
                                 </tr>
                           </table>
                     </div>
               </td>
         </tr>
         <tr class="trPas">
               <td class="showHideDetails" name="name2" id="id2">+</td>
               <td>73498325</td>
               <td>B</td>
               <td>WALMART B</td>
         </tr>
         <tr class="trPasInnerTable">
               <td colspan="1"></td>
               <td colspan="9">
                     <div id="pasRow2" name="pasRow2">
                           <table id="table2">
                                 <tr class="PasInnerTable">
                                       <td class="PasInnerTableBlue">Shp Acct code 2:</td>
                                       <td class="PasInnerTableBlue">123456</td>
                                 </tr>
                                 <tr class="PasInnerTable">
                                       <td class="PasInnerTableGray">Origin Zip:</td>
                                       <td class="PasInnerTableGray">64110</td>
                                 </tr>
                           </table>
                     </div>
               </td>
            </tr>
      </tbody>
</table>

<script type="text/javascript">      

jQuery( document ).ready( function() {

      jQuery('#pasRow1').hide();
      jQuery('#pasRow2').hide();

      // Register on click Handler
      jQuery( "td.showHideDetails" ).on( "click", this, showHideDetailsTDHandler);
      
      // Register on click Handler
      jQuery( "th.showHideDetails" ).on( "click", this, showHideDetailsTHHandler);

});

function showHideDetailsTDHandler() {
      
      // This much of the code I can get to work so when I click on the "+" sign in
      // either one of the the rows I get the both inner table to show.
      jQuery('#pasRow1').show();
      jQuery('#pasRow2').show();
      
      // What I want to happen and cannot figure out is how can I find out what row the user
      // Clicked on so that I can hide or show (Expanse/Collapse) only that inner table for that row.
}

function showHideDetailsTHHandler() {
      
      // This much of the code I can get to work so when I click on the "+" sign in
      // either one of the the header I get the both inner table to hide.
      // This is going to be a function that will either hide or show (Expanse/Collapse) all rows.
      // I think I know how to do this.  I am going to use a each loop.  This one is really not
      // the problem.  I just coded to prove that it will work.
      
      jQuery('#pasRow1').hide();
      jQuery('#pasRow2').hide();
}

</script>
jwandmrsquaredAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Tom BeckConnect With a Mentor Commented:
You are already passing the object that was clicked with "this" in your click handler. That object will be the <td> that holds the plus sign. So in the handler function you need to navigate from the plus sign <td> up to the parent <tr>, down to the next <tr class="trPasInnerTable">, and find the <div> to show. Use toggle() instead of show() so the row hides again on the next click. Add some more jQuery to change the plus sign to a minus sign when expanding the row and back to plus when collapsing the row.
jQuery( document ).ready( function() {
		
	jQuery('#pasRow1').hide();
	jQuery('#pasRow2').hide();
	
	// Register on click Handler
	jQuery( "td.showHideDetails" ).on( "click", this, showHideDetailsTDHandler);

});

function showHideDetailsTDHandler() {
	
	jQuery(this).parent('tr').next('tr.trPasInnerTable').find('div').toggle();
	
}

Open in new window

There's a whole lot more you can do with this like:

1.) use slideToggle() instead of toggle() to add animation to the expanding/collapsing row.
2.) giving the hidden divs a class to simplify the task of finding them
3.) take out the divs completely and just toggle the rows themselves to simplify the task of finding the hidden part.
4.) use jQuery Accordion and get rid of those antiquated tables completely
0
 
Steve BinkCommented:
Just my two cents: pay special attention to Tom Beck's final point.  Nested tables are difficult to work with, add unnecessary complexity to the end code, and are not the SOP for page design.  Learning a little CSS will soon make almost all your dependencies on tables obsolete, not to mention making your code easier to maintain.
0
 
jwandmrsquaredAuthor Commented:
Thank you Tom, that worked , and thanks Steve.  I am going to look into using more CSS as I had a sort table function that now does not work.
0
All Courses

From novice to tech pro — start learning today.