Question

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

在这里，我可以选择不同值的倍数，并同时将它们突出显示为绿色。我想要做的是当我点击＆＃34;选择所有＆＃34;按钮，我希望以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;
}

请参阅更新的小提琴here。

突出显示不同颜色的细胞

1 个答案: