金子邦彦研究室 ▶ プログラミング ▶ JavaScript による Web プログラミング ▶ jQuery を用いてテーブルの行に配色

サイトマップ サイト内検索 まとめ

サイトの全体構成

jQuery を用いてテーブルの行に配色

全体構成 人工知能 データベース ３次元，地図 プログラミング 情報工学全般 インストール 支援 連絡先，業績

jQuery のセレクタを使い、テーブルの奇数行と偶数行の背景色を変えます．

◆ 動作画面の例

[image]

【関連する外部ページ】 : https://ascii.jp/elem/000/000/498/498710/

準備

◆ JavaScript に関する Web ブラウザの設定

◆ HTML ファイルの例（１）

テーブルの先頭行と奇数行と偶数行で色を変えたいので、 jQuery のセレクタを使い、要素にクラス名を追加している 

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Shift_JIS" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <title>
            jQuery を用いてテーブルの行に配色
        </title>
      
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery.ui.all.css" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 

        <script type="text/javascript">
          <!--      
            jQuery.noConflict();
            jQuery(document).ready(function($) {
              $("table tr:first-child").addClass("first-child");
              $("table tr:last-child").addClass("last-child");
              $("table tr:nth-child(even)").addClass("even");
              $("table tr:nth-child(odd)").addClass("odd");
            });
          //-->          
        </script>
                  
        <style>
         table tr:first-child { 
              background-color: #808080;
          }
         table tr:nth-child(even) { 
              background-color: #ffffff;
          }
         table tr:nth-child(odd) { 
              background-color: #d0d0e0;
          }
        </style>
    </head>

    <body>
      <table>
        <tr>
          <th> </th>
          <td>商品名</td>
          <td>価格</td>
        </tr>
        <tr>
          <th>1</th>
          <td>りんご</td>
          <td>120</td>
        </tr>
        <tr>
          <th>2</th>
          <td>みかん</td>
          <td>80</td>
        </tr>
        <tr>
          <th>3</th>
          <td>バナナ</td>
          <td>250</td>
        </tr>
      </table>

    </body>
</html>

◆ HTML ファイルの例（２）

マウスカーソルの行の文字フォントを「x-large」に変えるようにしている． 

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Shift_JIS" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <title>
            jQuery を用いてテーブルの行に配色
        </title>
      
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery.ui.all.css" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 

        <script type="text/javascript">
          <!--      
            jQuery.noConflict();
            jQuery(document).ready(function($) {
              $("table tr:first-child").addClass("first-child");
              $("table tr:last-child").addClass("last-child");
              $("table tr:nth-child(even)").addClass("even");
              $("table tr:nth-child(odd)").addClass("odd");
              $("tr:nth-child(odd)").addClass("odd").mouseover(function(){ $(this).addClass("hover") }).mouseout(function(){ $(this).removeClass("hover") });
              $("tr:nth-child(even)").addClass("even").mouseover(function(){ $(this).addClass("hover") }).mouseout(function(){ $(this).removeClass("hover") });
            });
          //-->          
        </script>
                  
        <style>
         table tr:first-child { 
              background-color: #808080;
         }
         table tr:nth-child(even) { 
              background-color: #ffffff;
         }
         table tr:nth-child(odd) { 
              background-color: #d0d0e0;
         }
         table .hover { 
              font-size: x-large;
         }
        </style>
    </head>

    <body>
      <table>
        <tr>
          <th> </th>
          <td>商品名</td>
          <td>価格</td>
        </tr>
        <tr>
          <th>1</th>
          <td>りんご</td>
          <td>120</td>
        </tr>
        <tr>
          <th>2</th>
          <td>みかん</td>
          <td>80</td>
        </tr>
        <tr>
          <th>3</th>
          <td>バナナ</td>
          <td>250</td>
        </tr>
      </table>

    </body>
</html>

本サイトは金子邦彦研究室のWebページである．

資料等の公開では，原則，「クリエイティブコモンズ BY NC SA」として公開するようにしている． PDFファイル，パワーポイントファイルなどには， 「クリエイティブコモンズ BY NC SA」を明記するとともに，ロゴを記載するようにしている（作業が間に合っていない分もあるのでご容赦ください）．

公開している資料をご利用になる場合の，再配布の条件，剽窃の防止などについて，別ページ »で説明 再配布や資料改変の際には，そのページをご確認ください．

サイトマップは，サイトマップのページをご覧下さい． 本サイト内の検索は，サイト内検索のページをご利用下さい．

問い合わせ先： 金子邦彦（かねこ くにひこ） [image]