Change Text Color in Jquery

Question

Expensive;

I have an html page that contains three Mysql database information (
HIGH, Medium and Low). I wanted only the word
HIGH was in red, Medium in orange and Low in blue. I tried to do via PHP with Swicth Case, but without success. Since I don’t know anything about Jquery, I wanted to have an idea and help from you. I searched a lot on the Internet, but without success. Example of the HTML part:

<td><font size='1'><div id=add9 align=middle style='color: XXX ' > HIGH<td>

I don’t know if there is any Pluguin in Jquery, which scans the div, locates the text and through the text it changes the color of the same.

Example of my table :

 $row['subject']."</td><td>"."<font size='1'>"."<div id='div_result' align='middle'>".
   $row['score']."</div>"."<td><a href=delete.php?id=". 

Html snippet:

<table class="table table-bordred table-striped" >

               <thead>

               <th><input type="checkbox" id="idALL" name="nameALL" onClick="CheckAll()" /></th>
               <th>Qtde</th>
               <th>Data</th>
               <th>IP</th>
                <th>Hostname</th>
                 <th>Sender</th>
                 <th>Subject</th>
                 <th>Score</th>

Grateful to anyone who can help.

Answer 1

You can scroll through all cells of the table, compare the text and add a class, example:

$(document).ready(function(){
    $("#myTable tbody tr td").each(function(){
       if($(this).text() == "LOW")
    	   $(this).addClass('low');
       else if ($(this).text() == "MEDIUM")
    	   $(this).addClass('medium');
       else if ($(this).text() == "HIGH")
    	   $(this).addClass('high');
    });
});

.low{
  color:blue;
}
.medium{
  color:yellow;
}
.high{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="myTable">
<thead>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
  </tr>
</thead>
<tboby>
  <tr>
    <td>LOW</td>
    <td>HIGH</td>
  </tr>
  <tr>
    <td></td>
    <td>MEDIUM</td>
  </tr>
  <tr>
    <td>LOW</td>
    <td></td>
  </tr>
  <tr>
    <td>HIGH</td>
    <td>HIGH</td>
  </tr>
</tboby>
</table>

Alternative to jQuery code:

$(document).ready(function(){
    $("#myTable tbody tr td").each(function(){
       var text = $(this).text();
       if(text == "LOW" || text == "MEDIUM" || text == "HIGH")
          $(this).addClass(text.toLowerCase());
    });
});

Jsfiddle

Answer 2

Set a class in your "div" so it looks like this:

<div class="div_result" id="add9" align="middle">HIGH</div>

Function to scan all class Divs and change text color:

function AlteraStyleDasDivs() {
  $(".div_result").each(function() {
    if ($(this).text() == "HIGH")
      $(this).css("color", "red");
    else
    if ($(this).text() == "Medium")
      $(this).css("color", "orange");
    else
    if ($(this).text() == "Low")
      $(this).css("color", "blue");
  });
}

Finally, call the function after loading your page:

$(document).ready(function(){
  AlteraStyleDasDivs();
});