如何结合javascript与HTML，使表改变颜色取决于值

How to incorporate javascript with HTML to make table change color depending on value?

本文关键字：改变 变颜色 取决于 HTML 何结合 结合 javascript      更新时间：2023-09-26

我如何创建一个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>

如;如果box value (td) = OK，则box为绿色，如果value为BAD，则box为黄色。

基于类似问题的当前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');
}
});

实际上，您可以使用纯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

给每个td一些类名，你想应用check on value基于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>

您需要使用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';

EDIT:添加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';

另一个使用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

相关文章：