54268

How to change dynamically tabe cell text colors?

I need a solution to change dynamically via javascript the text color of table cells. The text can be the following colors: blue, green, red and black.

Table example:

<html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset="UTF-8"> <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="page"> <div data-role="content"> <table width="100%" border="0" id="friends" class="menu"> <tr id="friend1"> <td>First name</td> <td>Surname</td> </tr> <tr id="friend2"> <td>First name</td> <td>Surname</td> </tr> <tr id="friend3"> <td>First name</td> <td>Surname</td> </tr> <tr id="friend4"> <td>First name</td> <td>Surname</td> </tr> <tr id="friend5"> <td>First name</td> <td>Surname</td> </tr> </table> </div> </div> </body> </html>

How can I change the text color? Conditions are, that I could do this dynamically via javascript and more than one time. That means I need to set a color (e.g. red), later reset the color to black and set it following to another color (e.g. blue).

I saw some examples with setting the color via id, but I found no way to transfer this example to table cells and each cell could have different colors.

Can someone help me?

Answer1:

you can go through all td's

var tds = document.getElementsByTagName("td"); for(var i = 0, j = tds.length; i < j; ++i) tds[i].style.color = "#00AA00";

OR

you can go through td's that are childs of a special element:

var myNode = document.getElementById("friend2"); var tds = myNode.getElementsByTagName("td"); for(var i = 0, j = tds.length; i < j; ++i) tds[i].style.color = "#00AA00";

greetings!

Answer2:

create a class for each color in your css file:

.redCell{ color:red; } .blueCell{ color:blue; } .yellowCell...

then, add the class to the TD you need:

$('#friend01').addClass('blueCell');

if you need to remove the color:

$('#friend01').removeClass('blueCell');

if you need to know if a cell has a certain color:

$('#friend01').hasClass('blueCell');

Recommend

  • PDF page count using regex
  • Regarding client side code generation from WSDL
  • cordova build android throws error on Ubuntu 12.04
  • Why does IE8 fail to resolve my JQuery selector for a checked radio option?
  • Unique SMS sender id?
  • Rails AREL .where statement
  • jQueryMobile, Ajax Navigation, and MVC
  • Which browser have this strange user agent? (IOS device)
  • I am receiving HibernateException “No Hibernate Session bound to thread, and configuration does not
  • MySQL: Update rows in table by iterating and joining with another one
  • Using Generics on right hand side in Java 6?
  • Javascript CORS - No 'Access-Control-Allow-Origin' header is present
  • Uncaught TypeError: $(…).select2 is not a function
  • What is the purpose of TaskExecutor in spring?
  • How to view images from protected folder with php?
  • D3 get axis values on zoom event
  • JBoss External Properties Files in Classpath
  • MySQL Order by column = x, column asc?
  • Android - Material Design - NavigationView - How to put vertical scroll?
  • Display images in Django
  • Custom validator control occupying space even though display set to dynamic
  • JSON response opens as a file, but I can't access it with JavaScript
  • Could not find rake using whenever rails
  • Jquery UI tool tip close icon
  • req.body is undefined - nodejs
  • Resize panoramic image to fixed size
  • Modifying destination and filename of gulp-svg-sprite
  • SSO with signing and signature validation doesn't work
  • Importing jscolor library in angular 2
  • jQuery tmpl and DataLink beta
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • How to disable jQuery.jplayer autoplay?
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How do I configure my settings file to work with unit tests?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • apache spark aggregate function using min value
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs