如何在表格中突出显示的行上执行组“unhighlight”

问题描述：

我有一张表，其中任何时候用户单击其中一行时突出显示该行。但是，如果我有多行突出显示，我必须单击每个单独的突出显示行以摆脱突出显示。我想这样做，当一个人没有点击桌子时，它将摆脱所有行上的高光。这是我正在使用的代码。如何在表格中突出显示的行上执行组“unhighlight”

//this highlights the table that has been clicked on 
$('.tr_highlight').live('click',(function() { 
    $(this).parent().toggleClass("tr_highlight_ed"); 
}));

如何在点击表格的任何位置时忽略它（如果有的话）？

答

你确实需要发布渲染标记的例子。你不想做一个toggleClass，你会做一个removeClass选择父节点...

假设下面的标记...

<body> 
... 
    <table id="myTable">...</table> 
... 
</body>

您可以结合以下..

$('body').click(function(evt){ 
    //evt.target is what was clicked on, which bubbles up to body 
    //if it's anything inside #myTable, you will get the #myTable 
    var el = $(evt.target).closest('#myTable'); 

    //if you didn't get #myTable, you clicked outside the table 
    //remove the given class from all the tr's 
    if (!el.length) $('#myTable .tr_highlight_ed').removeClass('tr_highlight_ed'); 
});

感谢您的补充说明 – 2011-12-18 20:57:54

答

$(document).bind('click.table', function (e) { 
    if ($("#my-table").has(e.target).length === 0) { 
      $("#my-table").find("tr").removeClass('tr_highlight_ed'); 
    } 
});

每次用户点击页面上的任何地方，它会检查是否被点击的元素是在表内;如果不是，我们不重视所有的行。

如何在表格中突出显示的行上执行组“unhighlight”

相关推荐