Я пытаюсь подсчитать количество 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>
Как это возможно?
Новый ответ теперь вы указали на свой 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
выше.
Вот пример, который я сделал на 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
};
rgb
(потому что некоторые не включают пробелы).