Вам было бы намного лучше, если это возможно, использовать id
s для ваших элементов, а затем использовать document.getElementById()
(или, что еще лучше, использовать Dojo, MooTools или JQuery для упрощения кода).
Итак, ваш HTML выглядит так:
<td id="cell-repair-video">Repair value is <b>23</b></td>
<td id="cell-ppv">PPV value is <b>5</b></td>
Тогда ваш JavaScript будет выглядеть так:
var RepairVideo_cell = document.getElementById("cell-repair-video");
var RepairVideo_value = RepairVideo_cell.getElementsByTagName("b")[0];
В JQuery (и других) вы можете легко использовать класс, чтобы определить, какие элементы требуют порогового значения
В этом случае ваш HTML выглядит так:
<td class="threshold">Repair value is <b>23</b></td>
<td class="threshold">PPV value is <b>5</b></td>
А ваш весь JavaScript выглядит так:
$(function() {
var threshValue = 10;
$('.threshold').each(function(index) {
var thisValue = parseFloat( $('b', this).text() );
if(thisValue > threshValue) {
$(this).addClass('overThreshold');
}
});
});
В вашем текущем примере в вашем CSS * есть ошибка
Чтобы стилизовать td
и th
элементы с именем класса, перейдите
td.overThreshold, th.overThreshold {
background: #F00; /* for example */
}