JQuery highlight row with checkbox click

Question

$(document).ready(function(){
    $(".txtDate").datepicker({ showOn: "both", 
        buttonImage: "library/ui/datepicker/img/calendar2.gif", dateFormat: "yy/mm/dd", buttonImageOnly: true });

    //added this checkbox click for something I given earlier

    $("#Table input").click(function() { 
        if ($(this).attr("checked") == true)
        {
            $(this).parent().parent().addClass("highlight");  
        } 
        else
        {   
            $(this).parent().parent().removeClass("highlight");
        }
    });
});

I have a checkbox control for each row that I add dynamically in code behind

for( int i=0; i< data.count;i++){   
    HtmlTableCell CheckCell = new HtmlTableCell();
    CheckBox Check = new CheckBox(); 

    CheckCell.Controls.Add(Check);

    row.Cells.Add(CheckCell);
    Table.Rows.Add(row);
}

table id with markup is here:

<table id="Table"  runat="server" width="100%" cellspacing="5" border="1"> 
    <colgroup width="3%"></colgroup>
    <colgroup width="15%"></colgroup>
    <colgroup width="20%"></colgroup>
    <colgroup width="15%"></colgroup>
    <colgroup width="47%"></colgroup>
    <thead>
        <tr> 
            <th id="CheckBox" runat="server"><input type="checkbox" id="CheckBox1" name="CheckBox" runat="server" /></th>
            <th id="Type" runat="server"></th>
            <th id="Category" runat="server"></th>  
            <th id="DateTime" runat="server"></th>  
            <th id="Description" runat="server"></th>
        </tr>
    </thead> 
    <tbody>
    </tbody>
</table>

... why do you keep editing this?

Paolo Bergantino
– Paolo Bergantino

2009-03-18 05:56:06 +00:00
Commented Mar 18, 2009 at 5:56 — Paolo Bergantino
– Paolo Bergantino, Commented Mar 18, 2009 at 5:56

Mark Brackett · Accepted Answer · 2008-12-12 17:38:24Z

6

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.

answered Dec 12, 2008 at 17:38

Mark Brackett

85.9k17 gold badges113 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cLFlaVA Over a year ago

toggleClass is definitely sexier.

Steve Davies · Accepted Answer · 2008-12-12 17:48:54Z

2

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.

answered Dec 12, 2008 at 17:48

Steve Davies

5623 gold badges7 silver badges14 bronze badges

Comments

rz. · Accepted Answer · 2008-12-12 17:35:56Z

1

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.

answered Dec 12, 2008 at 17:35

rz.

20.1k10 gold badges58 silver badges47 bronze badges

4 Comments

cLFlaVA Over a year ago

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

TStamper Over a year ago

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

cLFlaVA Over a year ago

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

rz. Over a year ago

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

cLFlaVA · Accepted Answer · 2008-12-12 17:35:58Z

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">
<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>

Collectives™ on Stack Overflow

JQuery highlight row with checkbox click

4 Answers 4

1 Comment

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related