Question

我有一张表，用户每次点击其中一行时都会突出显示该行。但是，如果我突出显示多行，则必须单击每个突出显示的行以消除突出显示。我想这样做，当一个人没有点击表时，它将摆脱所有行上的突出显示。这是我正在使用的代码。

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

如果点击桌子以外的任何地方，如何让它不亮（如果只是一个单词）？

Answer 1

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

每当用户点击页面上的任何位置时，它将检查被点击的元素是否在表格内;如果没有，我们不会突出显示所有行。

Answer 2

您确实需要发布渲染标记的示例。你不想做一个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');
});

如何对表中突出显示的行执行“取消强调”组

2 个答案: