Solved

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

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

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. …
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

617 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