Question

我有一张包含另一张桌子的桌子。这很丑陋，但这就是我现在所困扰的。

内部表包含一系列行，每行包含一个链接。单击其中一行时，我会根据该行中包含的链接在DIV中打开外部页面。然后我将样式应用于单击的行，并从内部表中的其他行中删除相同的样式。

以下是执行此操作的代码：

(function($) {  
$(function() {  
$('tr:has(.load_link)') // select tr elements that have .load_link descendants

.click(function(e) {
    e.preventDefault();

    var link = $(this).find('a.load_link');

    $.address.value(link.attr('href'));

    $('#content').load(link.attr('href'));
    $(this).removeClass('rownotselected').addClass('rowselected')
           .siblings()
               .removeClass("rowselected").addClass("rownotselected");
               return false; 
});


});  
})(jQuery);

完美无缺。问题是如果在外部表中的任何地方单击鼠标，而不是在内部表中附加了load_link类的其中一行上，则整个外部表被赋予“rowselected”类。有没有办法阻止这些点击触发类更改，只是将其限制为应该触发它的行？

非常感谢。

Answer 1

这样的事情怎么样？

$('table#innerTable tr:has(.load_link)').click(function(e) {
    /* snip */
});

Answer 2

您可以使用以下选项仅选择最接近的表格行以将您的点击事件绑定到：

$('.load_link').closest('tr')

对于嵌套表，它只会选择直接包含.load_link的行，并忽略DOM树中的任何一行。请参阅jQuery文档中的.closest()。

限制点击某些表行

2 个答案: