javascript - 如何将 javascript 与 HTML 合并，使表格根据值改变颜色？

Question

我如何创建一个 javascript 来根据它的值改变框的颜色？

<table>
<tr class="top row">
    <th> Status </th>
    <th> Name</th>
    <th> StudentID </th>
    <th> Grades </th>
</tr>
<tr>
    <td> BAD </td>
    <td> Jason </td>
    <td> 955012 </td>
    <td> 20 </td>
</tr>
</table>

例如；如果框值 (td) = OK 框将为绿色，如果值为 BAD 框将为黄色。

基于类似问题的当前 Java 脚本

 $('#test [id^="available_"]').each(function(){

var closestTd = $(this).closest('td');
var valueCache = parseInt($(this).val());

if(valueCache === CRITICAL) {
   closestTd .addClass('red');
}
else if(valueCache === BAD) {
   closestTd.addClass('yellow');
}
else {
   closestTd.addClass('green');
}

});

Answer 1

实际上，您可以使用纯 CSS 来完成此操作。

注意 data-status 属性的值

<table>
<tr class="top row">
    <th> Status </th>
    <th> Name</th>
    <th> StudentID </th>
    <th> Grades </th>
</tr>
<tr>
    <td data-status="BAD"> BAD </td>
    <td> Jason </td>
    <td> 955012 </td>
    <td> 20 </td>
</tr>
</table>

还有用于样式化的 CSS

tr td[data-status="OK"] {
  background-color: green;
}
tr td[data-status="BAD"] {
  background-color: yellow;
}

例子 http://codepen.io/KarlDoyle/pen/jraJEB