如何在页面加载时突出显示 JQuery 表的第一行？答案

【问题标题】：How to highlight first row of table JQuery on page load ?如何在页面加载时突出显示 JQuery 表的第一行？
【发布时间】：2013-02-01 07:09:02
【问题描述】：

如果单击任何行，我的以下代码可以正常工作：

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

我需要在页面加载时，此表的第一行应突出显示。我该怎么做？

【问题讨论】：

对我有用吗...??@Nida Sulheri

标签： javascript jquery html syntax-highlighting highlight

【解决方案1】：

加载后触发函数

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

为此，您应该在绑定点击事件后添加：

 #currentloc_table tr

【讨论】：

【解决方案2】：

你可以试试这个使用.first()或者:first()来选择目标：

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

或：

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

你可以看看这些：

.eq() 和 :eq()
nth-child()
:first-child

read documentation

【讨论】：

或:first-of-type 选择器。
是的，谢谢，伙计，我也错过了这个，尽管还有其他几种方法可以得到这种东西（没有字眼）。
你的表是动态生成的吗？

【解决方案3】：

试试这个

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

或者尝试使用

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

【讨论】：

【解决方案4】：

试试这个

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

工作demo

【讨论】：

这是完整的答案。其他人都忽略了复选框部分，可能是因为它不在问题中。
@AshwinMukhija 感谢您的详细回复，但很抱歉，突出显示仍然不起作用:(

【解决方案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();

【讨论】：

感谢您的详细回复。但问题仍然存在。页面重新加载后它没有突出显示第一行。

【解决方案6】：

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

【讨论】：

它没有用。页面加载后第一行没有突出显示。

【解决方案7】：

试试这个，

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

还有css

.selected_f {
     background: yellow;
}

您的 CSS 类作为所选类的默认值，因此它没有添加该类，并且无法看到效果

【讨论】：

如果你提供 JsFiddle 更好