My following code works fine if any row is clicked:

$(document).ready(function() {  
$('#currentloc_table tr').click(function(event) {
    $("#"+$(this).attr('id')+" input:checkbox")[0].checked = !  ($("#"+$(this).attr('id')+" input:checkbox")[0].checked);
    if($("#"+$(this).attr('id')+" input:checkbox")[0].checked == true)
        $(this).addClass('selected');
    else if($("#"+$(this).attr('id')+" input:checkbox")[0].checked == false)
        $(this).removeClass('selected');    
});
});

Here is the CSS:

.selected td {
background: yellow;
}

What I need that on page load, first row of this table should get highlighted. How can i do that?

My following code works fine if any row is clicked:

$(document).ready(function() {  
$('#currentloc_table tr').click(function(event) {
    $("#"+$(this).attr('id')+" input:checkbox")[0].checked = !  ($("#"+$(this).attr('id')+" input:checkbox")[0].checked);
    if($("#"+$(this).attr('id')+" input:checkbox")[0].checked == true)
        $(this).addClass('selected');
    else if($("#"+$(this).attr('id')+" input:checkbox")[0].checked == false)
        $(this).removeClass('selected');    
});
});

Here is the CSS:

.selected td {
background: yellow;
}

What I need that on page load, first row of this table should get highlighted. How can i do that?

• javascript
• jquery
• html
• syntax-highlighting
• highlight

• Is it worked mine...??@Nida Sulheri – GautamD31 Commented Feb 16, 2013 at 11:19

7 Answers 7

Try this

$(document).ready(function () {
    $('#currentloc_table tr').click(function (event) {
            $("#" + $(this).attr('id') + " input:checkbox")[0].checked = !($("#" + $(this).attr('id') + " input:checkbox")[0].checked);
            if ($("#" + $(this).attr('id') + " input:checkbox")[0].checked == true)
               $(this).addClass('selected');
            else if ($("#" + $(this).attr('id') + " input:checkbox")[0].checked == false)
                $(this).removeClass('selected');
    });
    // Add these lines
    var firstTr = $('#currentloc_table tr:first');
    firstTr.addClass('selected');
    firstTr.find("input:checkbox")[0].checked = true;
});

working demo

You can try this use .first() or :first() to select the target:

$(document).ready(function() {  
   $('#currentloc_table tr').first().addClass('selected');
   ....

or:

$(document).ready(function() {  
   $('#currentloc_table tr:first').addClass('selected');
   ....

You can though take a look at these:

1. .eq() and :eq()
2. nth-child()
3. :first-child

read documentation

Trigger the function after load

$('#currentloc_table tr:first-child').trigger('click');

For this to work you should add this after binding click event with:

 #currentloc_table tr

Seems like your code could be improved sligtly:

$('#currentloc_table tr').click(function (event) {
    var check = $("input:checkbox", this)[0];
    check.checked = !check.checked;
    $(this)[check.checked ? 'addClass' : 'removeClass']('selected');
});

To select the first row:

$('#currentloc_table tr:first').click();

$(document).ready(function () {
     $('#currentloc_table').find('tr:first').addClass('selected');
});

Try this ,

$(document).ready(function() {  
$('#currentloc_table tr').first().addClass('selected_f');
  // rest of your stuff ....

And css

.selected_f {
     background: yellow;
} 

Your CSS class taking as default for selected class, so its not adding that class , and not able to see the effect

Try with this

$(document).ready(function(){
     $("#currentloc_table tr:first"):css('background','yellow');
})

or else try with

$("#currentloc_table tr").eq(0):css('background','yellow');