Solved

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

Posted on 2015-02-06
3
146 Views
Last Modified: 2015-02-09
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>
0
Comment
Question by:jwandmrsquared
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40595567
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
 
LVL 50

Expert Comment

by:Steve Bink
ID: 40596040
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
 

Author Closing Comment

by:jwandmrsquared
ID: 40599582
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How do I pull the base url for use in html links 7 38
Connection to multiple databases 13 37
replica website 2 53
How to control cache of some js files ? 7 56
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question