Question

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?

Answer 1

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');
});