2

我需要一个解决方案来通过 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 设置颜色的示例，但我发现无法将此示例转移到表格单元格，并且每个单元格都可以有不同的颜色。

有人能帮我吗？

4

2 回答 2

7

你可以通过所有的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";

问候！

于 2012-11-07T08:44:13.533 回答
3

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

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

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

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

如果您需要去除颜色：

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

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

$('#friend01').hasClass('blueCell');
于 2012-11-07T08:43:45.420 回答