Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2393
  • Last Modified:

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

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
Jason Jones
Asked:
Jason Jones
  • 5
  • 3
1 Solution
 
ashish_vikramCommented:
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
 
Jason JonesGIS/APP DevAuthor Commented:
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
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
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.

 
Jason JonesGIS/APP DevAuthor Commented:
PERFECT!

Thanks!!
0
 
Jason JonesGIS/APP DevAuthor Commented:
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
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
 
Jason JonesGIS/APP DevAuthor Commented:
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
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
 
Jason JonesGIS/APP DevAuthor Commented:
You are a master!   thanks!!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now