Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Showing/Hiding Table Rows with Javascript - can do with ID - how to do with Class?

I have a table which lists merchandise in a Guitar Store - each row contains one piece of merchandise. Each row (and each piece of merchandise) is either New, Used or on Consignment. I'd like for a user to be able to click a link in a sidebar UL (clicking on either New, Used, or Cons) and have only the table rows of that corresponding condition remain visible. So if a user clicked "Used" then all New and Cons rows would become hidden.

I have made this work with some simple JavaScript, but it uses getElementByID which won't work for me because I need to identify the TRs with classes. So that's where I get stumped. I'm not sure how to make this work with classes.

Here's the solution I've worked out so far:

<html>
<head>



<script>

function used() { 
   document.getElementById("new").style.display = 'none';
   document.getElementById("cons").style.display = 'none';
   document.getElementById("used").style.display = '';
}

function news() { 
   document.getElementByClass("new").style.display = '';
   document.getElementById("cons").style.display = 'none';
   document.getElementById("used").style.display = 'none';
}

function cons() { 
   document.getElementByClass("new").style.display = 'none';
   document.getElementById("cons").style.display = '';
   document.getElementById("used").style.display = 'none';
}
</script>


</head>
<body>
<span onClick="used();">Used</span><br />
<span onClick="news();">New</span><br />
<span onClick="cons();">Cons</span><br /><br />

<table border="1">
<tr id="used">
<td>Used</td>
</tr>
<tr id="new">
<td>New</td>
</tr>
<tr id="cons">
<td>Cons</td>
</tr>
</table>

</body>
</html>

The above code works ok, and if I could get it to work with classes instead it would solve my immediate need. However, ultimately I'd like to scale this up to use for Brands as well - so that a user could click on a brand and see only the posts for that brand. In that situation I might have 20 or 30 brands in the table, so the above would not be ideal. Also this will ultimately live in a Wordpress site, and I would ideally be creating the classes for each brand from meta data in wordpress and similarly creating a dynamic UL containing the brands that toggle the table, as well as having a js solution that can work with a changing set of variables! So I know that what I have above is not the best approach, but it's the only one I know enough to try right now.

Help with the above would be most appreciated - as would advice about how I might do this more effectively as I move towards the more challenging Brands aspect.

EDIT:

Google helped me out, and I have a new direction - this might solve my problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
</style>


</head>
<body>
  <ul class="side-nav">
<li><a class="cond" href="#">Show all</a></li>
<li><a class="used" href="#">Used</a></li>
<li><a class="new" href="#">New</a></li>
<li><a class="cons" href="#">Cons</a></li>

</ul>

<table>
<tr class="cond used">
<td>A Used Item</td>
<td>Used.</td>
</tr>
<tr class="cond new">
<td>A New Item</td>
<td>New</td>
</tr>
<tr class="cond cons">
<td>A Cons Item</td>
<td>Cons</td>
</tr>
</table>
<script>
$(function()
{
    $('ul.side-nav a').click(function()
    {
       $('tr.cond').hide();
       $('tr.' + $(this).attr('class')).show();       
    });
});
</script>

</body>
</html>
like image 990
WilliamAlexander Avatar asked Jul 08 '13 01:07

WilliamAlexander


People also ask

How do you make a hidden tr in HTML?

I add style="display:none;" to my table rows all the time and it effectively hides the entire row. worked for me.


2 Answers

document.getElementsByClassName returns a NodeList, not a single element, I'd recommend either using jQuery, since you'd only have to use something like $('.new').toggle()

or if you want plain JS try :

function toggle_by_class(cls, on) {
    var lst = document.getElementsByClassName(cls);
    for(var i = 0; i < lst.length; ++i) {
        lst[i].style.display = on ? '' : 'none';
    }
}
like image 185
OneOfOne Avatar answered Nov 11 '22 02:11

OneOfOne


JQuery 10.1.2 has a nice show and hide functions that encapsulate the behavior you are talking about. This would save you having to write a new function or keep track of css classes.

$("new").show();

$("new").hide();

w3cSchool link to JQuery show and hide

like image 28
spartikus Avatar answered Nov 11 '22 02:11

spartikus