tek satırdaki hücreleri seç ve vurgula

Question

Şu anda planlama ile ilgili bir şeyler yapıyorum. Bu yüzden zaman damgası olan bir tablom var. Her satır bir kişinin adıyla başlar. Benim fikrim, ilk önce bir hücre seçebiliyor. Sonra bu satırda bloke edilirsiniz ve hiçbir hücre seçilmedikçe yalnızca o satırdaki satırları seçebilirsiniz.

İşte kodum. Birisi bunu anlamaya yardımcı olabilir mi?

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

Fare aşağı olayı gerçekleştiğinde, üst satırdaki 'current_row' sınıfını ekleyin. Sonra vurgulanan sınıfı sadece 'current_row' sınıfına sahip satırı ekleyin. Bu kodu sınamak ne olur

 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

En hızlı çözüm Şu anki satırı belirten başka bir global eklemektir. senin mousedown olay işleyicisi bu set Sonra

var currentTR = null; 

: Sonra

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

, senin mouseover olay:

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); 

Başka bir olası çözüm sadece üzerinde mouseover olay işleyicisi ayarlamak olacaktır mpedown olay işleyicinizdeki ilgili satırı ve mouseup etkinliğinizde tekrar kaldırın.