CODEWITHSUNDEEP
jquery
Indira
Indira

Reputation: 49

How to change the background color of one row instead of all rows?

I have a table row with class trhlite

"<tr class='trhlite'; bgcolor='".$color."'; onMouseOver=\"this.bgColor='pink';\"   
onMouseOut=\"this.bgColor='".$color."';\" id=\"row"."\">";

Onclick of a button in each row, it must change the color of the entire row.

But my jQuery changes for all rows in the table: 

var id = id;

$.ajax({
    url: "<?php echo $this->address .'feedback/postflag'?>",
    type: 'POST',
    data: "id=" + id,
    success: function (data) {
        var index = parseFloat(id);
        // alert(index);            
        $(".trhlite").css("background-color", "yellow");
    }
})

How should I change it so that it changes a particular row only?

Upvotes: 2

Views: 1480

Answers (7)

Hkachhia
Hkachhia

Reputation: 4539

You have pass selector in function and use like 

function change_bg(this)
{
  $(this +".trhlite").css("background-color","yellow");
}

Upvotes: 0

webdeveloper
webdeveloper

Reputation: 17288

Look at my example: jsfiddle.net/ntvYq/

$('#mytable').on('click', 'tr', function(){
    $(this).css("background-color","yellow");
});

Upvotes: 0

Bram Vanroy
Bram Vanroy

Reputation: 28437

$(".trhlite .buttonSelector").click(function() {
    $(this).parent(".trhlite").css("background-color","yellow");
});

Didn't test, but should work. (Replace .buttonSelector with the class of the button, or use the semantic term (such as: input).

Upvotes: 1

jtheman
jtheman

Reputation: 7491

You should not add semicolons between attributes in HTML. But your problem is possibly because all rows share the same ID, should be different.

Upvotes: 0

Chandresh M
Chandresh M

Reputation: 3828

Try below code, it may what you want to implement. 

$(document).ready(function() {
   $("someTableSelector").find("tr:gt(0)").each(function(){
        $(this).css('background-color','#000000');
  })
});

Upvotes: 0

Pabuc
Pabuc

Reputation: 5638

$(".trhlite").css("background-color","yellow"); means any object with class trhlite will have a bgcolor yellow.

Try adding unique values to your classes each row like trhlite1 trhlite2 or something else so you can change bgcolors individually.

I would love to help more but I can't with the information you provided.

Maybe adding all of the js code would help.

Upvotes: 0

manavo
manavo

Reputation: 1899

In jQuery, using $(".trhlite") as a selector, will match all elements that have a class of trhlite. To make it work with only the one row, you'll need a way to uniquely identify which row was affected, and then access that one to change its background!

Upvotes: 0

Related Questions