JavaScript + Ajax 実践サンプル集

行を交互に異なる背景色にする

説明補足説明コード分割コードコメント投稿

このサンプルは、テーブルの行を交互に異なる背景色にすることにより見やすくしています。TRタグの「class」属性を手動で追加する代わりに、JavaScriptでランタイム時に自動的に追加します。

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

<!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" >
<head>
<title>Table Alternating Row</title>
<style type="text/css">
.tbl {
   width: 100%;
   border: 1px solid #000;
   border-collapse: collapse;
   font-family: arial, sans-serif;
   font-size: small;
}
.tbl td, .tbl th {
   text-align: center;
   border: 1px solid #000;
}
.tbl th {
   background-color: #aaf;
}
.tbl .on {
   background-color: #ddd;
}
.tbl .off {
   background-color: #fff;
}
.tbl .hover {
   background-color: #99f;
}
.tbl .click {
   background-color: #66f;
   font-weight: bold;
}
</style>
<script type="text/javascript">
var elem = "TR";
window.onload = function() {
  if(document.getElementsByTagName) {
    var el = document.getElementsByTagName(elem);
      for(var i=0; i<el.length; i++) {
        if(el[i].childNodes[0].tagName != "TH"
          && el[i].parentNode.parentNode.className.indexOf("tbl") != -1) {
          if(i%2 == 1) {
            el[i].className = "on";
          } else {
            el[i].className = "off";
          }
        }
      }
  }      
}
</script>
</head>
<body>
<table class="tbl">
  <tr><th>Word Word</th><th>Word Word</th><th>Word Word</th></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
  <tr><td>word word</td><td>word word</td><td>word word</td></tr>
</table>
</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
var elem = "TR";
window.onload = function() {
  if(document.getElementsByTagName) {
    var el = document.getElementsByTagName(elem);
      for(var i=0; i<el.length; i++) {
        if(el[i].childNodes[0].tagName != "TH"
          && el[i].parentNode.parentNode.className.indexOf("tbl") != -1) {
          if(i%2 == 1) {
            el[i].className = "on";
          } else {
            el[i].className = "off";
          }
        }
      }
  }      
}

このサンプルを編集して試してみる!

<table>から<tr>タグを一括して抽出するには、document.getElementsByTagName()メソッドを使用します。TRタグに「class」属性を追加するには、TR要素のclassNameプロパティにCSSのクラス名を設定します。

var tr = document.getElementsByTagName("TR");
tr[0].className = "off";
tr[1].className = "on";

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

行を交互に異なる背景色にする