Question

65

How to change dynamically tabe cell text colors?

rated 0 times [ 69] [ 4] / answers: 1 / hits: 25502 / 12 Years ago, wed, november 7, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

karolinab

Add To Favorites

Follow

Total Points: 644

Total Questions: 98

Total Answers: 117

Location: Vanuatu

Member since Mon, Dec 7, 2020

4 Years ago

answered 12 Years ago dequant · Accepted Answer

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!