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

Answer 2

为每个要应用的td提供一些类名，检查基于值的ie 使用以下代码

<html>
<head>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        if($(".chkval").text()=="OK"){
      $(".chkval").css("background-color","green");
}
else if($(".chkval").text()=="BAD"){
      $(".chkval").css("background-color","yellow");
}
});


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

Answer 3

您需要使用innerHTML从td获取价值：

<table>
<tr class="top row">
    <th> Status </th>
    <th> Name</th>
    <th> StudentID </th>
    <th> Grades </th>
</tr>
<tr>
    <td id="td"> OK </td>
    <td> Jason </td>
    <td> 955012 </td>
    <td> 20 </td>
</tr>
</table>
<script src="path/to/your/script.js"></script>

的script.js：

   var td = document.getElementById('td');
   if(td.innerHTML == ' OK ')
      td.style.backgroundColor = 'green';
   else if(td.innerHTML == ' BAD ')
      td.style.backgroundColor = 'yellow';

编辑：添加了JS函数trim()：

    var td = document.getElementById('td');
    if(td.innerHTML.trim() == 'OK')
        td.style.backgroundColor = 'green';
    else if(td.innerHTML.trim() == 'BAD')
        td.style.backgroundColor = 'yellow';

Answer 4

使用JS的另一种解决方案。

这是一个函数，它为每个具有您指定值的td应用唯一类。

function addTdClass(string) {
  var element = document.getElementsByTagName('td');
  for (var i = 0; i < element.length; i++) {
    var str = element[i].innerHTML;
    if (str.indexOf(string) !== -1) {
      element[i].className = 'td-' + string;
    }
  };  
}

addTdClass('BAD');

实例 http://codepen.io/KarlDoyle/pen/kkxqbv

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

4 个答案: