ansaurus

Question

jquery highlight row with checkbox click “Jquery beginner”

Answer 1

A:

The first problem that I see is that there is no element with id "Table input" ie that matches "#Table input" -- at least not in the html you provided. No matter what, the id can't have a space so check that. I'll be glad to help you further if you need.

rz 2008-12-12 17:35:56

$("#Table input") is a valid jQuery selector. In English, it means "return all input elements within the object with an ID of "Table".

cLFlaVA 2008-12-12 17:38:34

$("#Table input"): so what it is looking for is the input id to be <input id="Table"and not <table id="Table" ><input>?

TStamper 2008-12-12 17:51:25

Nope... it selects the input elements within the #Table element. Take a look at http://docs.jquery.com/Selectors/id#id and http://docs.jquery.com/Selectors/descendant#ancestordescendant.

cLFlaVA 2008-12-12 17:55:51

doh! I must've been asleep while writing that.

rz 2008-12-12 18:13:23

Answer 2

+1 A:

Grr, I had just finished typing up my response to this question before it was deleted. Are you going to delete this one as well?

I created a sample file to test your scenario and it worked as I expected. I've included it below for your reference. That being said, I suggest removing any code not related to the specific functionality you're trying to work out during your test to ensure there are no peripheral issues with other code. Also, be sure to do a view > source to make sure your table really does have that ID, and that your checkboxes and HTML are being properly and validly rendered. If you have broken HTML, your jQuery won't work.

Here's the sample file I used. What browser are you testing in?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
    <title>Untitled</title>
    <script type="text/javascript" src="shared-scripts/jquery-1.2.4b.js"></script>
    <style type="text/css">
     .highlight {
      background-color: yellow;
     }
    </style>

    <script type="text/javascript">
    <!--
    $(document).ready(function(){
     $("#Table input").click(function() {
         if ($(this).attr("checked") == true) {
             $(this).parent().parent().addClass("highlight");
         } else {
             $(this).parent().parent().removeClass("highlight");
         }
     });
    });
    //-->
    </script>
</head>

<body>
<form name="f">
<table id="Table" border="1"><tr>
    <td><input type="checkbox" name="cb1" id="cb1" value="y" /></td>
    <td>Click me</td>
</tr><tr>
    <td><input type="checkbox" name="cb2" id="cb2" value="y" /></td>
    <td>Click me</td>
</tr><tr>
    <td><input type="checkbox" name="cb3" id="cb3" value="y" /></td>
    <td>Click me</td>
</tr></table>
</form>
</body>
</html>

cLFlaVA 2008-12-12 17:35:58

Sorry. I thought it was overlook since it was clear enough

TStamper 2008-12-12 17:48:24

Answer 3

+2 A:

There's nothing wrong with your JQuery code - though it'd be cleaner if you used toggleClass:

 $('#Table INPUT').click(function() {
     $(this).parent().parent().toggleClass('highlight');
 });

I'd guess either your id's are wrong - or you're hitting another JavaScript error before that snippet of JQuery runs.

Mark Brackett 2008-12-12 17:38:24

toggleClass is definitely sexier.

cLFlaVA 2008-12-12 17:40:04

Answer 4

+1 A:

Yea - my answer just got zapped too.

Anyway, if you are using asp.net then the names get mangled ( to something like ctl100_Table ) and you need to put this into the jquery instead of Table.

Look at the actual rendered html in the browser to get the name you need to use.

You can try using $("[id$=Table]).attr("id") to get the mangled version.

Steve Davies 2008-12-12 17:48:54

ansaurus

tags:

views:

answers:

jquery highlight row with checkbox click “Jquery beginner”

related questions