Javascript 在tbody中计算tr，这具有一定的风格特征

我试着数一数tbody中td的数量，它有一个白色的背景色。我需要在计数后更新跨距的文本。我班的学生人数是

HTML

这怎么可能呢？

新答案现在您已经引用了您的HTML：

现在，您已经引用了HTML，现在将其显示为：

<tr style='background-color:white;'>
    <td>Albert Hvistendahl Fabel</td>
</tr>

…但是，如果您更改“样式”属性，例如在“背景颜色：”和“白色”之间添加一个空格，则该选项将停止工作

主要的建议是更改HTML，这样您就可以更容易地查找一些内容，比如类

原始答复：

没有捷径，你必须找到所有的td元素，然后循环检查它们是否有白色的背景色，可能是通过过滤器。请注意，element.style.backgroundColor或$element.cssbackground-color可能使用十六进制或rgb表示法，因此您必须考虑到这一点

比如：

…但这几乎是伪代码。这个想法只是为了给你指出正确的方向

请注意，这将只匹配指定了背景色的td元素。如果您需要查找通过样式指定的，请使用$this.cssbackground-color，而不是上面的this.style.backgroundColor。

新答案现在您已经引用了您的HTML：

现在，您已经引用了HTML，现在将其显示为：

<tr style='background-color:white;'>
    <td>Albert Hvistendahl Fabel</td>
</tr>

…但是，如果您更改“样式”属性，例如在“背景颜色：”和“白色”之间添加一个空格，则该选项将停止工作

主要的建议是更改HTML，这样您就可以更容易地查找一些内容，比如类

原始答复：

没有捷径，你必须找到所有的td元素，然后循环检查它们是否有白色的背景色，可能是通过过滤器。请注意，element.style.backgroundColor或$element.cssbackground-color可能使用十六进制或rgb表示法，因此您必须考虑到这一点

比如：

…但这几乎是伪代码。这个想法只是为了给你指出正确的方向

请注意，这将只匹配指定了背景色的td元素。如果您需要查找通过样式分配的，请使用$this.cssbackground-color，而不是上面的this.style.backgroundColor。

这里是一个关于JSFIDLE的示例。它使用rgb作为颜色，因为我使用的是chrome，你可能需要改变T.J.Crowder的答案

function calc_attendence() {
    var count = 0,
        tds = $('tbody td');

    $.each(tds, function (index, value) {
        var color = $(value).css('background-color');
        if (color == 'rgb(255, 255, 255)') { //works for me because I'm using chrome
            count = count + 1
        }
    });

    return count
};

这里有一个关于jsfiddle的例子。它使用rgb作为颜色，因为我使用的是chrome，你可能需要改变T.J.Crowder的答案

function calc_attendence() {
    var count = 0,
        tds = $('tbody td');

    $.each(tds, function (index, value) {
        var color = $(value).css('background-color');
        if (color == 'rgb(255, 255, 255)') { //works for me because I'm using chrome
            count = count + 1
        }
    });

    return count
};

---

背景颜色是在bgcolor中内联定义的，还是通过CSS定义的？是白色还是ffffff？通过CSS将其定义为“白色”显示您的HTML会有所帮助。背景颜色是在bgcolor中内联定义的，还是通过CSS定义的？它是白色还是ffffff？通过css将其定义为“白色”显示您的HTML将有所帮助。+1-在多次尝试基于颜色过滤元素后，它必须是最差的css属性，以匹配，因为它可以是十六进制、rgb、rgba，并且将来更新的浏览器甚至可能使用hsl，所以，当添加一个类或其他东西变得如此简单时，这真的不值得去做。@adeneo:HSL-yikes，请告诉我浏览器不会开始给我们这个…：-他们可能会在某个时候，大多数现在支持RGBA，HSL和HSV不是表示RGB值的新的伟大方式，至少在出现新的更闪亮的东西之前是这样的。+1-在多次尝试基于颜色过滤元素后，它必须是最糟糕的css属性匹配，因为它可以是十六进制、RGB、RGBA，更新的浏览器将来甚至可能会使用hsl，所以当添加一个类或其他东西变得如此简单时，真的不值得这么做。@adeneo:hsl-yikes，请告诉我浏览器不会开始给我们这个…：-他们可能会在某个时候，大多数现在支持RGBA，HSL和HSV不是表示RGB值的新的伟大方式吗，至少在出现新的、更闪亮的东西之前是这样。这是非常脆弱的。在其他使用rgb的浏览器中，它将实现收支平衡，因为有些浏览器不包含空格。没错。我只是想传达一般的想法，我在回答中提到，颜色部分是有问题的，非常脆弱。在其他使用rgb的浏览器中，它将实现收支平衡，因为有些浏览器不包含空格。没错。我只是想传达一个大概的想法，我在回答中提到颜色部分有问题

var whiteBackgroundTds =
    $(".attendenceCount").closest('tbody').find('td').filter(onlyWhiteBG);

function onlyWhiteBG() {
    var bgcolor = (this.style.backgroundColor || "").toLowerCase(),
        m,
        isWhite = false;

    if (bgcolor.substring(0, 3) === "rgb") {
        // Handle rgb or rgba (check this rex, it's off-the-cuff
        m = /\s*rgb(?:a)?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/;
        if (m && m[1] === "255" && m[2] === "255" && m[3] === "255") {
            isWhite = true;
        }
    }
    else switch (bgcolor) {
        case "white": // Not likely
        case "#ffffff":
        case "#fff":
            isWhite = true;
    }
    return false; // Not white
}

function calc_attendence() {
    var count = 0,
        tds = $('tbody td');

    $.each(tds, function (index, value) {
        var color = $(value).css('background-color');
        if (color == 'rgb(255, 255, 255)') { //works for me because I'm using chrome
            count = count + 1
        }
    });

    return count
};