如何动态更改表格单元格文本颜色？答案

【问题标题】：How to change dynamically tabe cell text colors?如何动态更改表格单元格文本颜色？
【发布时间】：2012-11-07 08:37:31
【问题描述】：

我需要一个解决方案来通过 javascript 动态更改表格单元格的文本颜色。文本可以是以下颜色：蓝色、绿色、红色和黑色。

表格示例：

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

如何更改文本颜色？条件是，我可以通过 javascript 动态执行此操作并且不止一次。这意味着我需要设置一种颜色（例如红色），然后将颜色重置为黑色并将其设置为另一种颜色（例如蓝色）。

我看到了一些通过 id 设置颜色的示例，但我发现无法将此示例转移到表格单元格中，并且每个单元格可以有不同的颜色。

有人可以帮我吗？

【问题讨论】：

标签： javascript html

【解决方案1】：

你可以浏览所有td的

var tds = document.getElementsByTagName("td");

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

或

您可以查看作为特殊元素的子元素的 td：

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

你好！

【讨论】：

嗨麦克风，感谢您提供此解决方案。我试过了，它可以工作:-)。

【解决方案2】：

为您的 css 文件中的每种颜色创建一个类：

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

然后，将类添加到您需要的 TD 中：

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

如果需要去除颜色：

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

如果你需要知道一个单元格是否有某种颜色：

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

【讨论】：

用 jquery 做这件事的好方法，但你总是必须知道什么“颜色”——当前给对象的类，或者如果你设置了一个新类，你必须删除所有已知的类。示例：如果您有绿色、蓝色、黄色、红色、蓝色和黑色“颜色” - 类，您必须使用 $('#friend01').removeClass('...'); 删除所有这些类，以确保与其他类没有冲突。如果添加新颜色，则必须将其添加到代码中。我认为添加新类时这是一种很好但很复杂的方法。
我看没问题。要删除所有类，您可以创建一个“resetColors”函数来删除所有颜色类。另一种方法是跟踪每个单元格的颜色，并确保每个单元格只有一个类，例如使用全局数组。
首先感谢您的帮助:-)。我尝试了这个解决方案，但它在我身边不起作用。如果我用<tr id="friend1"><td id="friend1a">First name</td><td id="friend1b">Surname</td></tr> 扩展我的表格单元格并调用$('#friend1b').addClass('blue');，则文本不是预期的蓝色。
@Thomas 你一定是做错了什么。这个解决方案效果很好。这是一个小提琴：jsfiddle.net/4wxnq/2 只需单击“clickMe”p，文本就会改变颜色。
@Th0rndike：你是对的，它在你的小提琴中起作用。嗯，我真的不知道我做错了什么。我会检查这个！感谢您的解决方案和小提琴:-)。