添加CSS懸停在JavaScript處理表格單元格

Question

我目前使用下面的代碼基於其價值來着色單元：

cell.each(function() { 
      var cell_value = $(this).html(); 
      if (cell_value == 0){ 
       $(this).css({'background' : '#DF0101'}); 
      } else if ((cell_value >= 1) && (cell_value <=10)) { 
       $(this).css({'background' : '#FF7C00'}); 
      } else if (cell_value >= 8) { 
       $(this).css({'background' : '#04B404'}); 
      } 
     }); 

我還添加了CSS樣式表：

td:hover{ 
background-color:#CA2161;} 

所以，我怎樣才能讓這個懸停在JavaScript處理會改變顏色的細胞？在那一刻他們不會改變，他們只是停留在上面處理的顏色^^^

Answer 1

編輯：原來你希望當你懸停時顏色離開而不是顯示。簡單的改變。

好吧，首先，你應該分開這些伸到CSS類：

.ZeroValue { 
    background:'#DF0101'; 
} 

.ValueBetween1And10 { 
    background:'#FF7C00'; 
} 

.ValueOver8 { 
    background:'#04B404'; 
} 

.ValueTransparent { 
    background:transparent !important; 
} 

添加上述類上$(document).ready()根據它們的值：

if(cell_value === 0){ 
    cell.addCLass('ZeroValue'); 
} else if((cell_value >= 1) && (cell_value <= 10)){ 
    cell.addClass('ValueBetween1And10'); 
} else if(cell_value >= 8){ 
    cell.addClass('ValueOver8'); 
} 

然後，只需動態添加transparent類當您懸停時，請在您離開時將其移除：

cell.on({ 
    mouseenter:function(){ 
     $(this).addClass('ValueTransparent'); 
    }, 
    mouseleave:function(){ 
     $(this).removeClass('ValueTransparent'); 
    } 
}); 

或者，如果有一個獨特的顏色，每一個項目，你想暫時移除，你只需創建一個函數：

function classByValue(cell,cell_value){ 
    if(cell_value === 0){ 
     cell.addCLass('ZeroValue'); 
    } else if((cell_value >= 1) && (cell_value <= 10)){ 
     cell.addClass('ValueBetween1And10'); 
    } else if(cell_value >= 8){ 
     cell.addClass('ValueOver8'); 
    } 
} 

這將清除所有的類當鼠標進入，然後重新添加當鼠標進入時，該類基於cell_value。然後在負載和mouseleave上動態應用。該$(document).ready()：

cell.each(function(){ 
    classByValue(this,this.val()); 
}); 

而且懸停：

cell.on({ 
    mouseenter:function(){ 
     $(this).removeClass('ZeroValue ValueBetween1And10 ValueOver8'); 
    }, 
    mouseleave:function(){ 
     classByValue($(this),$(this).val()); 
    } 
}); 

有你有它，多種方式來實現自己的目標。您可能需要修改$(this).val()以適當反映該特定cell的值，但如果沒有您的HTML，我無法真正確定這一點。

作爲一方，>= 8的最後一個選項應該重新考慮，因爲值8或9永遠不會觸發它。

Answer 2

剛剛嘗試的懸停功能綁定到你的表的「TDS」像這樣

 $('td').hover(function(){ 
      $(this).css('background-color', '#CA2161'); 
     }); 

，如果你想刪除鼠標出來的顏色，你可以試試這個

 $("td").hover(
      function() { 
      $(this).css('background-color', '#CA2161'); 
     }, function() { 
     $(this).css('background-color', ''); 
     } 
    );