Question

我的表格如下：

<table id="tlist" border="1" cellpadding="0" cellspace="0">
    <thead><tr><th>sort</th></tr></thead>
    <tbody>
    <tr class="lrow"><td>first</td>
    </tr>
    <tr class="lrow"><td>second</td>
    </tr>
    <tr class="lrow"><td>third</td>
    </tr>
    </tbody>
</table>

我想点击tbody的第一行。我尝试了一些解决方案。

我尝试过：

//$("#tlist tr").first().css("background-color", "#00f");
$("#tlist").find("tr").eq(1).addClass("highlight");
$("#tlist").find("tr").eq(1).trigger("click");

$(".lrow").click(function() {
    alert("c");
});

$("#tlist tr").on('click', function() {
    alert("d");
});

我使用jquery在文档就绪上运行上面的代码。它不起作用。 highlight已添加到目标行。但颜色没有改变。我把它放在jfiddle上。任何人都有一些奉献？谢谢你的时间。

Answer 1

在您的小提琴中首先包含jquery库，并在css中查看下面的错误

.highlight td{
    background-color: "#0f0";
}

更改为

.highlight td{
    background-color: #0f0;  // remove double quotes
}

DEMO

Answer 2

试试这个：

$("#tlist").find("tr").eq(1).addClass("highlight");
$("#tlist").find("tr").eq(1).click(function(){
  alert();
});

CSS：

.highlight td{
    background-color: #0f0;
}

OR

 $("#tlist tbody").find("tr").eq(0).addClass("highlight");
 $("#tlist tbody").find("tr").eq(0).click(function(){
  alert();
});

CSS：

.highlight td{
    background-color: #0f0;
}

DEMO： - http://jsfiddle.net/d1mhdhzm/

Answer 3

只需更改序列，首先绑定事件然后使用触发器。

脚本

//Even Binding
$(".lrow").click(function () {
    alert("c");
});

$("#tlist tr").on('click', function () {
    alert("d");
});

//Trigger event
$("#tlist").find("tr").eq(1).addClass("highlight");
$("#tlist").find("tr").eq(1).trigger("click");

同样在CSS中，

.highlight{
    background-color: #0f0;  //remove quotes
}

DEMO

点击不会触发tbody的第一行

3 个答案: