JQuery根据背景颜色隐藏td

Question

我想根据<tr> 中<td> 的背景颜色隐藏<tr>，我当前的代码根据<td> 中的文本隐藏<tr>，但那是不是一个很好的解决方案。该表是一个日历，因此如果 JQuery 可以根据背景颜色隐藏表行，那就太好了。

我当前的代码：

function ShowAbsence()
{
    if(!presenceActive) clearPresence();
    $('table#newspaper-a tr:not(#header, #trWeekNummer)').each(function() { 
        var toggle1 = true;
        $('td:not(#firstlastname)',this).each(function() { 
            if($(this).text() == "f" || $(this).text() == "M" || $(this).text() == "A") {
                toggle1 = false;
            }
        });
        if(toggle1) {
            $(this).toggle();
        }
    });

    if(absenceActive) {
        absenceActive = false; 
    } else {
        absenceActive = true;
    }
}

这很好用，但正如您所见，它会根据单元格中的文本隐藏。希望您能帮我根据背景颜色隐藏它！

Answer 1

您必须使用 jQuery 的$.css() 函数，这样您才能获得与选择器关联的颜色样式。

这将返回一个 RGB 值（如 rgb(255,0.221) ），因此要将其转换为十六进制（#ff00dd 类型），您需要使用此函数（提取 from this other question）：

function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');
    return color;
}

因此，你可以这样做：

if (hexc($('#demo').css('background-color')) == '#ff00dd') {
    alert("Works!!");
}

活生生的例子：http://jsfiddle.net/vyQKV/1/

但是...

我强烈建议您使用类而不是处理颜色。背景颜色应该用不同的类定义，为了检查一个你应该用$.hasClass()检查类

例如：

if($(this).hasClass('redBackground')){
    //whatever
}