Change Text Color in Jquery

Question

Change Text Color in Jquery

Navigation

#1 by (4 votes)
#2 by (0 votes)

0

Expensive;

I have an html page that brings three information from the Mysql Database (
HIGH, Medium and Low). I just wanted 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 do not know anything about Jquery, I wanted to have an idea and / or help from you guys to do it. I searched the Internet a lot, but without success. HTML part example:

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

I do not know if there is some Pluguin in Jquery, which scans the div, finds the text and by means of the text it changes the color of it.

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=".


                                            
                                                            javascript
                                                            jquery
                                                    
                                        
                    
                        asked by  anonymous                          30.03.2017 / 21:47



        
            
                2 answers
                
            
            
                            

                                                                                                                
                                                                        
                            
                                
                                    
                                    4
                                    
                                
                            
                            
                                
                                    
                                        
 You can scroll through all of the table cells, compare text and add a class, for 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><tableborder="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   
    
                                    
                                    
                                         
                                        

                                                                                  30.03.2017 / 22:09
                                    
                                
                            
                        
                                                                                
                            
                                
                                    
                                    0
                                    
                                
                            
                            
                                
                                    
                                        
 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 divs of the class and change the color of the text: 

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 your page loads: 

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

    
                                    
                                    
                                         
                                        

                                                                                  30.03.2017 / 22:46
                                    
                                
                            
                        
                                                            
                            
        

                    
        

         
                            How do I resolve the "Notice: Trying to get property of non-object in" error?
                                        Datepicker of angled material does not work

score 4 · Answer 1

You can scroll through all of the table cells, compare text and add a class, for 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><tableborder="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

score 0 · 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 divs of the class and change the color of the text:

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 your page loads:

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