单击另一行时取消突出显示行背景

Question

我正在使用jQuery-contextMenu。我试图在左侧或右侧单击突出显示行背景。

$('body').on('mousedown', 'tr', function() {
   $(this).css('backgroundColor', '#000');
});

不知何故，contextMenu使它变得不稳定。你可以建议我如何在contextMenu之前将背景颜色变为三角形？ 请看下面的jsfiddle以获得更好的主意。我还需要在单击另一行时取消突出显示上一行背景。

http://jsfiddle.net/0f9Ljfjr/904/

Answer 1

如果您只想在任何给定时间拥有一行背景颜色，那么jQuery插件并不会弄乱您的代码。只是你永远不会“重写”它。我就是这样做的：

code_1();
code_2():
code_3();
code_4();
...
code_10();

您存储突出显示的元素，并在每次绘制其他行时将其更改回来。

我已经更新了你的jsfiddle：http://jsfiddle.net/0f9Ljfjr/909/

Answer 2

基本上左右点击都会触发正常鼠标事件，但如果您正在寻找右键单击事件。

$("body").on("contextmenu", "tr", function(event){
 .
 .
 .
});

在您的情况下，mousedown足以聆听左右点击

$("body").on("mousedown", "tr", function(event){
  $(this).siblings(".active").removeClass("active"); 
  $(this).addClass("active");
});

还有一点CSS

table.dataTable tbody tr.active {
  background-color: #000;
}