18

I have something like this:

<tr id='<%=currentRow %>' onclick="SetBackgroundColor(this)" style="background-color:Yellow">

When i click on a row i want to change its background color and i did like this:

function SetBackgroundColor(rowId) 
{
     $(rowId).css("background-color", "#000000");
}

but i don't know why it doesn't work. Any suggestions please?

3
  • Does anything happen? Try using Firebug or some "alert" lines to narrow down if the click event is even firing, what is getting passed to the function, etc. Commented Nov 30, 2009 at 17:35
  • You can also create a CSS class and apply the class to your TR with the javascript.
    – Roch
    Commented Nov 30, 2009 at 17:37
  • See for a row click demo jsbin.com/ufihi3
    – Pool
    Commented Nov 30, 2009 at 17:38

7 Answers 7

37

IE has a problem with background colors for the TR element. A more safe way is to set background to the TD's and TH's inside the TR:

<table id="tabletest">
    <tr>
        <td>testcell</td>
    </tr>
</table>

<script>
$('#tabletest tr').bind('click', function(e) {
    $(e.currentTarget).children('td, th').css('background-color','#000');
})
</script>

Added: you can assign a single event handler for the entire table to increase performance:

$('#tabletest').bind('click', function(e) {
    $(e.target).closest('tr').children('td,th').css('background-color','#000');
});
0
10

In jQuery you do not have to use the onclick attribute to assign an event handler. Lets say you add a class called mytr to each tr that you want to affect. Then you can do something like this:

 $(document).ready(function(){
        $(".mytr").click(function(){
             $(this).css("background-color", "#000000");
        });
 });

And that will apply the event handler to all rows with the class mytr.

1
  • nothing happens..i use firebug to watch..it jumps where it has to..but nothing..still yellow row
    – user158625
    Commented Nov 30, 2009 at 18:05
5

This will reset each row upon clicking a new one...

$(document).ready(function(){

  $('tr').click(function(){
    $('tr td').css({ 'background-color' : 'green'});
    $('td', this).css({ 'background-color' : 'red' });
  }); 

});

demo: http://jsbin.com/aciqi/

2
 $('#RowID').children('td, th').css('background-color','yellow');
1

A simpler solution is to probably use a selector for all rows in the table or addClass.

Example

$("#myTable tr").click(function() {
    $(this).css('background-color', '#f00');
});

or

$("#myTable tr").click(function() {
    $(this).addClass('selected');
});
0

Instead of changing the table row background color, try changing the table cell background color.

$(document).ready(function() {
    $(".mytr td").click(function() {
         $(this).css("background-color", "#000000");
    });
});
0

Thank you all..the problem was that in the masterpage i was loading the jquery-1.3.2.min.js before query-1.3.2-vsdoc.js and that's way it wasn't working..thanks again

1
  • Please select an answer so we know that you have a solution.
    – Mottie
    Commented Dec 1, 2009 at 4:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.