Solved

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

Posted on 2014-04-18
9
2,137 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 32

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
 
LVL 1

Author Comment

by:upgraders
ID: 40009273
PERFECT!

Thanks!!
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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 32

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 32

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

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…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now