jquery - 如何使用 jQuery 突出显示选定的行？

Question

我正在使用 jQuery 1.6.4，并且我有一个 html 表。我为表格分配了一个 id = "tbl"，然后使用点击事件来动态查找点击了哪一行。在该行中，我想突出显示它，以便用户可以看到单击了哪一行。

我在一本 jQuery 书中使用了一些代码，并对其进行了修改，以便与 (this) 一起使用。但是，它没有突出显示该行。

这是我的代码：

$('#tbl tr').click(function() { 
                //$('div.poem-stanza').addClass('highlight');
                $(this).addClass("highlight");
...

在萤火虫中，我验证 (this) 引用了一个 tr 元素，但由于某种原因，代码不适用于突出显示。我需要做什么才能使用（this）动态工作？

根据评论，我仔细检查并没有 .highlight 在我的 css 文件中。我已经为其他命名元素添加了它，并且在我对 css 文件的引用中出现了拼写错误。感谢萤火虫，我能够看到加载的所有内容和丢失的内容。

score 2 · Accepted Answer

tr 元素不能有背景颜色。为了突出显示一行，您必须突出显示该行中的每个 td。假设您为 tr 元素提供了 highlight 类，请将其添加到您的 css 文件中：

.highlight td { background-color:green; }

您会发现该行显示为绿色。

或者，您可以执行以下操作：

$('#tbl tr').click(function() { 
      $(this).find('td').addClass("highlight");
});

祝你好运！

score 1 · Accepted Answer

如果这些行是在 DOM 之后动态添加的，那么您将需要跨表委托 click 函数。

$(document).live('click', '#tbl tr', function(){ 
  $(this).addClass('highlight"); 
});

score 1 · Accepted Answer

你可以这样使用：

$("tr").one("click", "#tbl", function() {
      $(this).addClass("highlight");
});

3 回答 3