-2

我目前正在使用下面的代码根据它们的值对单元格进行着色：

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 中处理的单元格会改变颜色呢？此刻它们根本不会改变，它们只是保持上面处理过的颜色^^^

4

2 回答 2

0

编辑：结果你希望颜色在悬停时离开而不是显示。简单的改变。

好的，首先，您应该将它们分成 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。然后在 load 和 when 上动态应用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可能应该重新考虑，因为8or的值9永远不会触发它。

于 2013-11-04T15:46:39.853 回答
0

只需尝试像这样将悬停功能绑定到表格的“tds”

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

如果你想删除鼠标上的颜色，你可以试试这个

      $( "td" ).hover(
           function() {
          $(this).css('background-color', '#CA2161');
       }, function() {
         $(this).css('background-color', '');
        }
      );
于 2013-11-04T15:46:52.617 回答