2017-05-22 55 views
0

我有一个表与电视节目,如下图所示: enter image description here防止表列可以点击

当我点击“显示名称”,“集”或“播放日期”一栏一个模式弹出以便我可以编辑节目的细节。最后一列中的每一个图标都有一个目的,所以如果我点击其中一个图标,那么它仍然会按照列的顺序对其进行分类,因此会突出显示我不想要的整行。

这是我的jQuery突出显示该行:

$('tbody').on("click","tr",function(e) { 
    $('tbody tr').not(this).removeClass('selected_click_cell'); 
    $(this).toggleClass('selected_click_cell'); 
}); 

有没有办法仍然突出整行包括即使点击了最后一栏的图标的最后一列?或者,点击时只能突出显示前3列?

+0

你的问题是点击冒泡的DOM我相信如果我没有记错的话,将这些图标的z索引更改为列上方将修复它或另一个路径是为了防止默认值。 – Darkrum

+0

@Darkrum嗨,我该如何去做'z-index'?我试着用'1'的'z-index'设置'​​'。我也尝试用'z-index'创建另一个CSS属性,但它仍然不起作用。它仍然突出了整个行。 –

+0

你可以请张贴你的HTML吗? –

回答

0

以下评论:

  • $('tbody tr')是不必要通用的选择也很慢。将最后选定的行缓存在某处,以便您可以取消选择该行。
  • addClass而不是toggleClass
  • 不一致的引号字符。
  • 事件冒起来。从图标点击事件处理程序返回false。该图标当然已经比表格行有更高的z顺序。
  • 你会发现这种应用程序在Vue JS中比在jQuery变得复杂后更容易开发。