Solved

Javascript/Jquery - Hide Rows - How to apply to a specific table(s)

Posted on 2014-04-18
9
2,179 Views
Last Modified: 2014-04-18
I have some code borrowed from another site that I am trying to tweak for my use. It is an expand/compress for table rows.  The code below works perfect, except for one thing, It affects ALL the tables on a page.  I need to be able to specify which table to apply this attribute to.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Hide Expand Table Rows</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
  

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('tr').hide().filter(function () {
    return $(this).find('td[colspan]').length;
}).addClass('header').css('display', 'table-row').click(function () {
    $(this).nextUntil('tr.header').css('display', function (i, v) {
        return this.style.display === 'table-row' ? 'none' : 'table-row';
    });
});
});//]]>  

</script>


</head>
<body>
  <table border="0" style="border: 1px solid #000000">
    <tr class="header">
        <td colspan="2">Click this Header</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr class="header">
        <td colspan="2">Click this Header</td>
    </tr>
    <tr>
        <td>hide date</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
</table>
  
  
  
  <table style="width: 100%">
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
  </table>
  <br>
  <br>
  <table style="width: 100%">
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
		  <td>DON'T WANT TO HIDE THIS</td>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
		  <td>DON'T WANT TO HIDE THIS</td>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
  </table>
  
  <br>
  <br>
  
  
  References/Credit:<br>
  http://stackoverflow.com/questions/16926752/expand-collapse-table-rows-with-jquery
  <br>
  http://jsfiddle.net/davidThomas/zFJwa/1/
  
</body>


</html>

Open in new window

0
Comment
Question by:upgraders
  • 5
  • 3
9 Comments
 

Expert Comment

by:ashish_vikram
ID: 40008579
Hi,

Try using code similar to the below I have mentioned: -

<table id="my_table">
<thead>
<tr><th>Naame</th><th>Year</th></tr>
</thead>
all your data
</table>

Regards
0
 
LVL 1

Author Comment

by:upgraders
ID: 40008798
Unfortunately your table is hidden as well.  I think the change needs to happen in the JavaScript on the first line that hides all the TD tags
0
 
LVL 33

Expert Comment

by:Big Monty
ID: 40009182
you need to assign a class or id to the first table, then reference that in the javascript:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Hide Expand Table Rows</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
  

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#tbl1 tr').hide().filter(function () {
    return $(this).find('td[colspan]').length;
}).addClass('header').css('display', 'table-row').click(function () {
    $(this).nextUntil('tr.header').css('display', function (i, v) {
        return this.style.display === 'table-row' ? 'none' : 'table-row';
    });
});
});//]]>  

</script>


</head>
<body>
  <table id="tbl1" border="0" style="border: 1px solid #000000">
    <tr class="header">
        <td colspan="2">Click this Header</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr class="header">
        <td colspan="2">Click this Header</td>
    </tr>
    <tr>
        <td>hide date</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
</table>
  
  
  
  <table style="width: 100%">
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
  </table>
  <br>
  <br>
  <table style="width: 100%">
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
		  <td>DON'T WANT TO HIDE THIS</td>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
		  <td>DON'T WANT TO HIDE THIS</td>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
  </table>
  
  <br>
  <br>
  
  
  References/Credit:<br>
  http://stackoverflow.com/questions/16926752/expand-collapse-table-rows-with-jquery
  <br>
  http://jsfiddle.net/davidThomas/zFJwa/1/
  
</body>


</html>

Open in new window

0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 1

Author Comment

by:upgraders
ID: 40009273
PERFECT!

Thanks!!
0
 
LVL 1

Author Comment

by:upgraders
ID: 40009325
Well sorta..  I have one that has  a column setting in the last row, it does not "hide" on the load

Also what if I want to do two different tables on the same page.  For example a tbl1 and a tbl2?



  <table id="tbl1" border="0" style="border: 1px solid #000000">
    <tr class="header">
        <td colspan="2">Click this Header</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr class="header">
        <td colspan="2">Click this Header</td>
    </tr>
    <tr>
        <td>hide date</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td colspan="2">last line</td>
    </tr>
</table>

Open in new window

0
 
LVL 33

Expert Comment

by:Big Monty
ID: 40009348
i don't know what you mean by column setting....can you elaborate?

if you want to apply this to multiple tables, instead of an assigning an ID to a table, assign a class to each table. then, for example, if you assign a class of "hiddenTables", change your javascript to:

$('.hiddenTables tr').hide().filter(function () {
0
 
LVL 1

Author Comment

by:upgraders
ID: 40009389
Well If you look at the last line in the table

    <tr>
        <td colspan="2">last line</td>
    </tr>

The TD column span is not hiding like the rest of the rows above it





Could you provide an example (copy paste of the Class example..  I am pretty novice when it comes to Javascript  

Thanks!
0
 
LVL 33

Accepted Solution

by:
Big Monty earned 500 total points
ID: 40009478
i gotcha now. this was happening because in your filter function, you were setting all TD elements that had a colspan attribute visible. What you want is to add a class to your "header" TD's, the ones with the colspan=2, EXCEPT for the last line. then you need to change your javascript to reflect these changes.

The following should give you exactly what you need:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Hide Expand Table Rows</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
  

<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function () {
        $('.visibleTable tr').hide().filter(function () {
            return $(this).find('.stayVisible').length;
        }).addClass('header').css('display', 'table-row').click(function () {
            $(this).nextUntil('tr.header').css('display', function (i, v) {
                return this.style.display === 'table-row' ? 'none' : 'table-row';
            });
        });
    });//]]>  

</script>


</head>
<body>
<table class="visibleTable" border="0" style="border: 1px solid #000000">
    <tr class="header">
        <td colspan="2" class="stayVisible">Click this Header</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr class="header">
        <td colspan="2" class="stayVisible">Click this Header</td>
    </tr>
    <tr>
        <td>hide date</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td colspan="2">last line</td>
    </tr>
</table>
  
<br /><br /><br />

<table class="visibleTable" border="0" style="border: 1px solid #000000">
    <tr class="header">
        <td colspan="2" class="stayVisible">Click this Header</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr class="header">
        <td colspan="2" class="stayVisible">Click this Header</td>
    </tr>
    <tr>
        <td>hide date</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td>hide data</td>
        <td>hide data</td>
    </tr>
    <tr>
        <td colspan="2">last line</td>
    </tr>
</table>
  
  
  
  <table style="width: 100%">
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
  </table>
  <br>
  <br>
  <table style="width: 100%">
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
		  <td>DON'T WANT TO HIDE THIS</td>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
	  <tr>
		  <td>DON'T WANT TO HIDE THIS</td>
		  <td>DON'T WANT TO HIDE THIS</td>
		  <td>DON'T WANT TO HIDE THIS</td>
	  </tr>
  </table>
  
  <br>
  <br>
  
  
  References/Credit:<br>
  http://stackoverflow.com/questions/16926752/expand-collapse-table-rows-with-jquery
  <br>
  http://jsfiddle.net/davidThomas/zFJwa/1/
  
</body>


</html>

Open in new window

0
 
LVL 1

Author Comment

by:upgraders
ID: 40009909
You are a master!   thanks!!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

809 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