javascript - 用不同颜色突出显示单元格

Question

我得到了这个示例代码来突出显示表格的特定单元格。 请看一下 fiddle 示例:http://jsfiddle.net/hzss885e/

在这里，我可以选择多个不同值并同时将它们突出显示为绿色。我想做的是，当我单击“全选”按钮时，我希望所选值(4 个不同的值)以 4 种不同的颜色突出显示。颜色的选择并不重要。对于 javascript 专家来说，可能有一个简单的解决方案，但由于我对 jquery 的了解有限，我无法弄清楚。我感谢所有的回应。谢谢。

$('.selector').each(function() {
$(this).on('click', check); 
});
$('.all').each(function() {
   $(this).on('click', all); 
});

function all(event) {

    if($(this).is(':checked')){       $("input:checkbox:not(:checked)",$(this).parents('form')).not(this).prop("checked","checked");
} else {
    $("input:checkbox(:checked)",$(this).parents('form')).not(this).prop("checked","");
}

//$('.selector').prop("checked", this.name === "SelectAll");

check(event);
}

function check(event) {
var checked = $(".selector:checked").map(function () {
    return this.name
}).get()
$('td').removeClass("highlight").filter(function () {
    return $.inArray($(this).text(), checked) >= 0
}).addClass("highlight")
if ($(this).is(".selector"))
    $('.all').not(this).prop("checked", false)

}

Answer 1

将以下代码添加到您的 check 函数中:

// remove all previously set background colors
$('td').css({background: ""});

// create an object we will store our randomly generated colors on
var colors = {};

$(".highlight").each(function () {
    colors[$(this).text()] = colors[$(this).text()] || getRandomColor();
    $(this).css({background: colors[$(this).text()]});
});

其中 getRandomColor 为:

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

查看更新后的 fiddle here 。