Считайте tr в tbody, которые имеют определенную черту стиля

0

Я пытаюсь подсчитать количество td в tbody, которое имеет white background-color. Мне нужно обновить текст span после моего подсчета. Класс моего span - .attendenceCount

$(".attendenceCount").closest('tbody')...

HTML

<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>

Как это возможно?

  • 0
    Цвет фона определяется внутри строки, как в "bgcolor", или с помощью CSS? это "белый", "белый" или "ffffff"?
  • 0
    Он определяется как «белый» с помощью CSS
Показать ещё 1 комментарий
Теги:

2 ответа

4
Лучший ответ

Новый ответ теперь вы указали на свой 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 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 выше.

  • 2
    +1 - после нескольких попыток фильтровать элементы по цветам это должно быть худшее свойство css, которое когда-либо было сопоставлено, поскольку это могут быть hex, rgb, rgba, и более новые браузеры могут даже использовать hsl в будущем, так что на самом деле это не так стоит делать, когда так легко добавить класс или что-то вместо этого.
  • 0
    @adeneo: HSL - yikes, скажите, пожалуйста, браузеры не начнут давать нам это ... :-)
Показать ещё 1 комментарий
0

Вот пример, который я сделал на jsfiddle. Он использует rgb для цветов, потому что я использую хром, и вам может потребоваться его изменить (посмотрите на ответ TJCrowder относительно этого).

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
};
  • 0
    Это очень хрупко. Это сломается даже в других браузерах, которые используют rgb (потому что некоторые не включают пробелы).
  • 0
    Верно. Я только хотел передать общую идею и упомянул в ответе, что цветная часть проблематична.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню