CODEWITHSUNDEEP
javascripthtml
user5920744
user5920744

Reputation:

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

How would I create a javascript that will change the color of the box depending on it's value?

<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>

eg; if box value (td) = OK box will be green, if value is BAD box will be yellow.

Current Java script based from similar question

 $('#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');
}

});

Upvotes: 1

Views: 95

Answers (4)

DenysM
DenysM

Reputation: 389

You need to use innerHTML to get value from 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: added JS function 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';

Upvotes: 1

Gauri Bhosle
Gauri Bhosle

Reputation: 5473

Give some class name to each td where you want to apply check on value based ie Use below code

<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>

Upvotes: 2

Karl Doyle
Karl Doyle

Reputation: 642

Another solution using JS.

Here is a function which applies a unique class to each td which has a value that you specified. 

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');

Live Example http://codepen.io/KarlDoyle/pen/kkxqbv

Upvotes: 0

Karl Doyle
Karl Doyle

Reputation: 642

Actually, you can do this with pure CSS.

Notice the data-status attribute with the value

<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>

And the CSS for styling

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

Example http://codepen.io/KarlDoyle/pen/jraJEB

Upvotes: 2

Related Questions