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
Solved

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

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 Searchbox Branding 11 110
Shopping Cart 2 82
CSS: Making responsive table look nicer 7 31
What does GoogleTagMgr javascripts below do 5 26
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
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
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

790 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