Highlight row with jQuery

Question

I'm trying to change table row color when a radio button is checked in that row:

$(".myCheckbox").click(function(){
    $(this).closest("tr").toggleClass("highlightRow", this.checked);
});

For some reason when I use FireBug to see the result I see the following on check:

<tr class="highlightRow .highlightRow">

How do I end-up with two classes and one with a dot?

CSS

.highlightRow {
    background-color: #ccc;
}

Also tried:

.highlightRow TD {
    background-color: #ccc;
}

Could you post the original HTML? There's a good chance that you have something like this in there: `` — Ender, Apr 04 '11 at 19:56

score 0 · Answer 1 · edited May 23 '17 at 11:55

0

You must have been writing .highlightRow anywhere in your Javascript or anywhere in your original HTML. Please check again or post all Javascript and all HTML.

And aside form that: this solution is better by far. ;)

edited May 23 '17 at 11:55

Community

1
1

answered Apr 04 '11 at 19:53

buschtoens

7,435
9
37
57

Just curious, why do you think is a better solution? – AJJ Apr 04 '11 at 20:02
I supposed that he is doing a select operation. – buschtoens Apr 04 '11 at 20:04
That solution is not that great. Seeing $(this) over and over makes my brain go crazy. Why do people not do `var $this = $(this);` more? – Code Maverick Apr 04 '11 at 20:05

score 0 · Answer 2 · answered Apr 04 '11 at 20:01

0

I think that the code works without adding a second parameter:

$(".myCheckbox").click(function(){
    $(this).closest("tr").toggleClass("highlightRow");
});

And the CSS that might work:

.myCheckBox td
{
  background-color: rgb(150, 150, 150);
}

answered Apr 04 '11 at 20:01

Blender

275,078
51
420
480

score -1 · Answer 3 · edited May 23 '17 at 11:47

-1

this was answered here:

Highlight a word with jQuery

via the jQuery highlight plugin:

http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

edited May 23 '17 at 11:47

Community

1
1

answered Apr 04 '11 at 19:53

Code Maverick

19,661
10
58
112

@silvinci - yes, and I think the jQuery highlight plugin would eliminate the issue. – Code Maverick Apr 04 '11 at 19:58
But, eliminating the "highlightRow" class in the HTML markup would definitely fix the additional class being added by toggleClass(). – Code Maverick Apr 04 '11 at 20:00
He wanted to highlight a whole table row. I suppose to make clear, that it is selected. Not only paticular words... – buschtoens Apr 04 '11 at 20:00
Yes. And you can select a TR or TD via jQuery's selector. Did you visit the highlight plugin link? Or did you just read the link name from which the answer was obtained? – Code Maverick Apr 04 '11 at 20:01
Why should he use a massively overloaded plug-in for such a simple operation? – buschtoens Apr 04 '11 at 20:03
It's not that big of an operation and I tend to think in larger terms is all. Would be nice whenever and wherever to simply use `$("#tagId").highlight();` and `$("tagId").removeHighlight();`. – Code Maverick Apr 04 '11 at 20:09

Highlight row with jQuery

3 Answers3