如何在頁面加載時突出顯示表JQuery的第一行？

Question

如果單擊任何行，我的以下代碼將正常工作：

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

這是CSS：

.selected td {
background: yellow;
}

我需要頁面加載時，此表的第一行應突出顯示。 我怎樣才能做到這一點？

Answer 1

嘗試這個

$(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;
});

工作演示

Answer 2

您可以嘗試使用.first()或:first()來選擇目標：

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

要么：

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

您可以查看以下內容：

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

閱讀文檔

Answer 3

加載后觸發功能

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

為此，您應在將click事件綁定到以下項后添加：

 #currentloc_table tr

Answer 4

試試這個

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

否則嘗試

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

Answer 5

似乎您的代碼可以得到明顯改進：

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

要選擇第一行：

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

Answer 6

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

Answer 7

嘗試這個 ，

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

和CSS

.selected_f {
     background: yellow;
} 

您的CSS類作為所選類的默認類，因此不會添加該類，因此無法看到效果