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 に答える