如何將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>

例如; 如果box value（td）= OK，則框為綠色，如果value為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提供一些類名，即使用以下代碼

<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的函數，該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 個解決方案

解決方案1
2 2016-10-04 18:30:31

解決方案2
2 2016-10-04 18:39:19

解決方案3
1 2016-10-04 18:34:13

解決方案4
0 已采納 2016-10-04 18:54:36

如何將JavaScript與HTML合並以使表格根據值更改顏色？

問題描述

4 個解決方案

解決方案1 2 2016-10-04 18:30:31

解決方案2 2 2016-10-04 18:39:19

解決方案3 1 2016-10-04 18:34:13

解決方案4 0 已采納 2016-10-04 18:54:36

解決方案1
2 2016-10-04 18:30:31

解決方案2
2 2016-10-04 18:39:19

解決方案3
1 2016-10-04 18:34:13

解決方案4
0 已采納 2016-10-04 18:54:36