CODEWITHSUNDEEP
javascriptjqueryhtmlcss
newbie
newbie

Reputation: 1033

javascript toggle table row background color on click

So i have some javascript code which on a table row click exapnds all subsequent table rows until it finds the same table row class again.

If you hover over a row it changes to gray which is what i expected.

The only stuff that doesn't work is when you click on the table row, i want the table row background color to be same as the hover (gray). the color should disappear when you click back and collapse the row.

I tried to add a toggle class as seen below.

$('.my-class').click(function(){

    $(this).nextUntil('tr.my-class').slideToggle(100);
    $(this).toggleClass("tr.my-class.negative.clicked");
});

But I am not sure if that is the right approach. Here is my jsfiddle: http://jsfiddle.net/DhdRG/3/

Upvotes: 0

Views: 1894

Answers (4)

newbie
newbie

Reputation: 1033

Just an heads up. This worked too and this might be a better solution:

$('.my-class').click(function(){

    $(this).nextUntil('tr.my-class').slideToggle(100);
    $(this).toggleClass("clicked");

});

http://jsfiddle.net/DhdRG/7/

Upvotes: 1

Srikanth AD
Srikanth AD

Reputation: 1854

You can toggle another CSS class to have the table row background color to be same as the hover (gray). http://jsfiddle.net/DhdRG/5/

$('.my-class').click(function(){

    $(this).nextUntil('tr.my-class').slideToggle(100);
    $(this).toggleClass("tr.my-class.negative.clicked");
    $(this).toggleClass("rowBg"); // added this line
});

CSS

.rowBg { background:gray;}

Upvotes: 0

Christian Grabowski
Christian Grabowski

Reputation: 2882

You could try $(this).removeClass('tr.my-class').addClass('tr.my-class.negative.clicked'); instead of $(this).toggleClass('tr.my-class.negative.clicked') But replace $(this) with the clicked tr's id.

Upvotes: 0

Kevin Lynch
Kevin Lynch

Reputation: 24713

You can toggle the class with the same event

DEMO http://jsfiddle.net/kevinPHPkevin/DhdRG/4/

$('.composite-test').toggleClass("grey");

Upvotes: 0

Related Questions