1行にあるセルを選択してハイライトします

Question

私は現在、計画に関連することをやっています。だから私はタイムスタンプのあるテーブルを持っています。すべての行は人の名前で始まります。私の考えは、まず一つのセルを選択できるということです。その行でブロックされ、セルが選択されていない限り、その行内の行のみを選択できます。

ここに私のコードです。誰かがそれを実現するのを助けることができる？

var isMouseDown = false, isHighlighted; 
    $(document).on('mousedown','#werknemers_table tr td',function(){ 
     isMouseDown = true; 
     $(this).toggleClass("highlighted"); 
     console.log("Click"); 
     console.log($(this).attr('class')); 
     isHighlighted = $(this).hasClass("highlighted"); 
     return false; // prevent text selection 
    }); 
    $(document).on('mouseover','#werknemers_table tr td',function(){ 
     if (isMouseDown) { 
      $(this).toggleClass("highlighted", isHighlighted); 
     } 
    }); 
    $(document).mouseup(function() { 
         isMouseDown = false; 
        }); 

Answer 1

マウスのダウンイベントが発生したとき、その親行に 'current_row'クラスを追加します。次に、 'current_row'クラスを持つ行だけを強調表示されたクラスに追加します。あなたはこのコードをテストするとどうなり

 var isMouseDown = false, isHighlighted; 
     $(document).on('mousedown','#werknemers_table tr td',function(){ 
      isMouseDown = true; 
      console.log('mousedown'); 
       $(this).toggleClass("highlighted").closest('tr').toggleClass('current_row'); 

      console.log("Click"); 
      console.log($(this).attr('class')); 
      isHighlighted = $(this).hasClass("highlighted"); 
      return false; // prevent text selection 
     }); 
     $(document).on('mouseover','#werknemers_table tr td',function(){ 

      if (isMouseDown && $(this).closest('tr').hasClass('current_row')) { 
       $(this).toggleClass("highlighted", isHighlighted); 
      } 
     }); 
     $(document).mouseup(function() { 
          isMouseDown = false; 
         }); 

      }); 

Answer 2

私が考えることができる最も速い解決策は、現在の行を示す別のグローバルを追加することです。あなたのマウスダウンイベントハンドラでこれを設定すると

var currentTR = null; 

、：そして、

currentTR = $(this).closest('tr'); 

、あなたのmouseoverイベント：

if (!isMouseDown) return; 
if (!$(this).parents().is(currentTR)) return; // <-- ignore event if we're not a child of the relevant row 
$(this).toggleClass("highlighted", isHighlighted); 

別の可能な解決策は、ちょうど上のmouseoverイベントハンドラを設定することですあなたのmosedownイベントハンドラの関連する行を削除し、mouseupイベントで再度削除します。