Question

我试图计算td中tbody的数量，其中white background-color为span。我需要在计算后更新span的文本。我.attendenceCount的班级是$(".attendenceCount").closest('tbody')...

<table>
    <thead>
        <tr>
            <th>Søløve 16:50-17:30 (3017) <span style="color:black;" class="attendenceCounter">tmp</span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr style='background-color:white;'>
            <td>Albert Hvistendahl Fabel</td>
        </tr>
        <tr style='background-color:green;'>
            <td>Albert Hvistendahl Fabel</td>
        </tr>
        <tr style='background-color:white;'>
            <td>Albert Hvistendahl Fabel</td>
        </tr>
        <tr style='background-color:green;'>
            <td>Alma Valbjørn Bratved</td>
        </tr>
        <tr style='background-color:white;'>
            <td>Albert Hvistendahl Fabel</td>
        </tr>
    </tbody>
</table>

HTML

{{1}}

这怎么可能？

Answer 1

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

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

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

如果style属性真的看起来完全，那就有一条捷径：

var tds = $(".attendenceCount").closest('tbody').find('tr[style="background-color:white;"] td');

...但是，如果您完全更改style属性（例如，在background-color:和white之间添加空格），那将停止工作

主要建议确实需要更改HTML，以便您可以更轻松地查找，例如类。

原始回答：

没有快捷方式，您必须找到所有td元素并循环检查它们是否有白色background-color（可能是通过filter）。请注意element.style.backgroundColor（或$element.css("background-color")可能是十六进制或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
}

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

请注意，这只会匹配td元素特别分配background-color。如果您需要查找通过样式分配的内容，请使用$(this).css("background-color")代替上面的this.style.backgroundColor。

Answer 2

这是关于jsfiddle的example I made。它使用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
};

在tbody中计数tr，它具有某种风格特征

2 个答案: