Question

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

有人可以帮助我吗？

Answer 1

你可以浏览所有td的

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

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

OR

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

问候！

Answer 2

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

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

然后，将课程添加到您需要的TD：

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

如果您需要删除颜色：

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

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

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

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

2 个答案: