Solved

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

Posted on 2015-02-06
3
147 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 51

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

Why You Need a DevOps Toolchain

IT needs to deliver services with more agility and velocity. IT must roll out application features and innovations faster to keep up with customer demands, which is where a DevOps toolchain steps in. View the infographic to see why you need a DevOps toolchain.

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will learn how to count occurrences of each item in an array.
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…

729 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