Count tr in tbody, у которых есть определенный стиль.

Question

Я пытаюсь подсчитать количество 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> 

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

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

Вот example I made на jsfiddle. Он использует rgb для цветов, потому что я использую хром, и вам может потребоваться изменить это (посмотрите на ответ 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 
};