Jump to content

Jquery / Multiple Buttons


Recommended Posts

I am trying to manipulate a table with Jquery - hiding certain rows upon a button click.

 

The table itself has 6 different class values. One class will always be displayed. I want to be able to hide any or all of the other 5 classes, and any combinations of them. I need a separate labeled button for each class.

 

The tutorials I have found (such as this one: http://www.w3schools...uery_hide_class) all show examples of 1 button, which I have been able to make work on my table.

 

But I am unable to add any other buttons - I can't figure out how to distinguish between different buttons.

 

I have tried name and id with no success.

 

An example that isn't working:

 

 

<input type='submit' name='hideP' id='hideP' value='Pop Culture' />

  	$("hideP").click(function(){
  	$(".P").hide(2000);
 	});

How do I have more than one button in Jquery?

PvP is not for me

In the 3rd Year of the Boycott
Real-world money saved since FT/W: Hundreds of Dollars
Real-world time saved since FT/W: Thousands of Hours

Link to comment
Share on other sites

http://www.w3schools.com/jquery/jquery_syntax.asp

 

jQuery Syntax Examples

 

$(this).hide()

Demonstrates the jQuery hide() method, hiding the current HTML element.

 

$("#test").hide()

Demonstrates the jQuery hide() method, hiding the element with id="test".

 

$("p").hide()

Demonstrates the jQuery hide() method, hiding all <p> elements.

 

$(".test").hide()

Demonstrates the jQuery hide() method, hiding all elements with class="test".

 

eg:

 

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function()
{
 $(".btest").click(
 function()
 {
   $(".test").hide();
 });

 $(".btest2").click(
 function()
 {
   $(".test").show();
 });

 $("#btest3").click(
 function()
 {
   $(".test").hide();
 });

 $("#btest4").click(
 function()
 {
   $(".test").show();
 });
});
</script>
</head>
<body>

<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btest">hide(class)</button>
<button class="btest2">show(class)</button>
<button id="btest3">hide(id)</button>
<button id="btest4">show(id)</button>
</body>
</html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.