Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2014-04-18
9
Medium Priority
?
2,292 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:Jason Jones
[X]
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
  • 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:Jason Jones
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 34

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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 1

Author Comment

by:Jason Jones
ID: 40009273
PERFECT!

Thanks!!
0
 
LVL 1

Author Comment

by:Jason Jones
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 34

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:Jason Jones
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 34

Accepted Solution

by:
Big Monty earned 2000 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:Jason Jones
ID: 40009909
You are a master!   thanks!!
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Suggested Courses

610 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