Question

我有一张包含大量行的表格。该表就在那里，人们可以通过复制/粘贴快速获取数据。麻烦的是你很容易忘记上次抓取文本的位置（即哪一行）。所以我想要一个函数，当你双击一行时（突出显示要复制的文本），然后只需突出显示该行并保持高亮显示，直到再次双击。

我非常渴望使用Jquery。

这是我到目前为止所得到的：

           $("tr").dblclick ( function() {
                var foo = (this);
                $(foo).css("background-color","#333");
                $(foo).css("color","white");
            });
            $("tr").mouseleave ( function() {
                var foo = (this);
                $(foo).css("background-color","#333");
                $(foo).css("color","white");
            });

双击有效。但是鼠标离开了每一行。我可以将一个变量分配给我双击的那一行，然后仅将.mouseleave函数应用于该行吗？或者是否有另一种功能更适合我想要的功能。

感谢。

Answer 1

 $("tr").dblclick ( function() {


// Unselect the previous selected row Logic
$(this).siblings().removeClass("Clicked");//Assuming the <tr> are at same level.

 //$(this).parent().children("tr").not(this).removeClass(".Clicked");    

 $(this).toggleClass("Clicked");

});

并将$("tr").mouseleave ( function() {});更改为$("document").on( "mouseleave","tr.Clicked",function() {});

此外，让css像

一样好

.Clicked{
background-color : #333;
color : white;

}

Answer 2

您可以添加一个标记来标识双击哪一个。如果该标志为真，则仅应用mouseleave函数。

如果您在这种情况下分配事件，则还必须应用delegation方法。像所有tr或所有李。

另外，我没有得到mouseleave事件的含义，因为你和dblclick事件一样。

   var allTr=$('#tableId').find('tr');
    $('#tableId').on('.dblclick','tr',function() {
        var foo = $(this);

        //to remove css and attribute from privous selected tr
        allTr.css({"background-color","#333","color","white"}).removeData('clicked')
       //if you want to remove css when you double click again on same tr than use this if condition other wise dont use.
       if(!foo.data('clicked')){
           foo .css({"background-color","#333","color","white"}).data('clicked',true);
       }
    }).on('mouseleave','tr',function() {
        var foo = $(this);
        if(foo.data('clicked')){
          foo .css({"background-color","#333","color","white"});
        }
    });

Answer 3

如果您可以使用JQuery UI Highlight

，则效果最佳

$("#myTbl tr:first-child").effect("highlight", {}, 3000);

检查Highlight

在Jquery中只突出显示一行

3 个答案: