asked on

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

ashish_vikram

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

Kristen Jones

ASKER

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

Big Monty

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

Kristen Jones

ASKER

PERFECT!

Thanks!!

Kristen Jones

ASKER

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

Big Monty

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 () {

Kristen Jones

ASKER

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!

ASKER CERTIFIED SOLUTION

Big Monty

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Kristen Jones

ASKER

You are a master! thanks!!