« ◆摩擦帯電の仕組み：拡散容積比モデル | トップページ | ◇BNFに構文選択プロパティ記述法追加拡張 »

◇HTMLのTABLEの色を１行おきに変える方法

・本記事では短いJavascriptプログラムでテーブルの色を一行おきに変えます。
・HTML5/CSS3による方法をHTML5/CSS3でtableを色を一行おきに変えるに置きました。
・jQueryによる方法を◆jQueryを使ってみる：クロスフェード画像切り替えなどに置きました。

 テーブルを１行おきに色を変える基本のやり方

HTMLのTABLEの色を１行毎に変える方法です。

大型→小型
ワシ→スズメ
ペンギン→ツバメ
ツル→チドリ
ハト→メジロ

Javascript関数:

上のテーブルは次のJavaScriptを使って１行毎に色を変えています。 

<script type="text/javascript">
// テーブルの色を行毎に変える　table:テーブル start:開始行　color1/2:色
function tableColor(table,start,color1,color2){
   var rows=table.rows;
   for(var idx=start;idx<rows.length;++idx){
      rows[idx].style.backgroundColor= idx%2==0?color1:color2;
      }
   }
</script>
引数はテーブルオブジェクト、何行目から色を付けるか(0オリジン)、 第１の色、第２の色です。

サンプルテーブル:

テーブルの記述は以下のようになっています。（内容は気にしないでください） 

<table id="table1" style="color:white;background:#222222;text-align:center" >
<tr style="background:#000044">
  <th style="width:5em">大型</th><th style="width:2em">→</th>
  <th style="width:5em">小型</th>
</tr>
<tr> <td>ワシ</td>     <td>→</td> <td>スズメ</td> </tr>
<tr> <td>ペンギン</td> <td>→</td> <td>ツバメ</td> </tr>
<tr> <td>ツル</td>     <td>→</td> <td>チドリ</td> </tr>
<tr> <td>ハト</td>     <td>→</td> <td>メジロ</td> </tr>
</table>

関数の呼び出し:

記事の一番最後に次のJavascriptを置き、tableColor関数を呼び出しています。 

<script type="text/javascript">
tableColor(document.getElementById("table1"),1,"#335500","#115500");
</script>

 実用的なテーブル色付け関数

先の例は動作はしますが若干実用性に欠けます。

次の工夫を入れたJavascript関数を作成しました。

  • 関数呼び出しを自動化する
  • 色付けするクラスは外部的に指定することを可能とする
  • <table>オブジェクトを指定して色付けを行うことを可能とする
  • 色はデフォルトがあり、<table>の属性で変更もできるものとする
  • 線はバックグラウンドをborder間隙で見せるのではなくborderとする
  • デフォルトでボーダーを書く機能を持たせる
  • ヘッド部とボディー部は関数内で見分ける
  • Javascriptを別ファイル化する

これを用いると次の記述で 

<script type="text/javascript" src="../../../js/hiTable.js"></script>
<table class=hiTable style="text-align:center">
<thead><tr><th style="width:5em">大型</th><th style="width:2em">→</th>
       <th style="width:5em">小型</th></tr></thead>
<tbody>
<tr> <td>ワシ</td>    <td>→</td> <td>スズメ</td> </tr>
<tr> <td>ペンギン</td><td>→</td> <td>ツバメ</td> </tr>
<tr> <td>ツル</td>    <td>→</td> <td>チドリ</td> </tr>
<tr> <td>ハト</td>    <td>→</td> <td>メジロ</td> </tr>
</tbody>
</table>
</p>
次のようなテーブルを得ることができます。ただし、Javascriptが無効である環境では テーブルの線も表示されません。

大型→ 小型
ワシ → スズメ
ペンギン→ ツバメ
ツル → チドリ
ハト → メジロ

hiTableクラスのtableを複数置いた場合、それら全てに色が付きます。

外部変数hiTableClassesに利用者クラス名がマッチする正規表現を設定すると、 利用者が定義したクラスのテーブルに色を付けることができます。クラスの boder定義をそのまま使いたい場合line=noを指定してください。line=no を指定しないと関数がborderを書き換えます。 

<style type="text/css">
   table.myTable{border:1px solid black ; border-collapse:collapse}
   table.myTable td{border:1px solid black}
   table.myTable th{border:1px solid black}
</style>
<script type="text/javascript" src="../../../js/hiTable.js"></script>
<script type="text/javascript">
hiTableClasses="myTable|hiTable";
</script>
<table class=myTable line=no style="text-align:center">
<thead><tr><th style="width:5em">大型</th><th style="width:2em">→</th>
       <th style="width:5em">小型</th></tr></thead>
<tbody>
<tr> <td>ワシ</td>    <td>→</td> <td>スズメ</td> </tr>
<tr> <td>ペンギン</td><td>→</td> <td>ツバメ</td> </tr>
<tr> <td>ツル</td>    <td>→</td> <td>チドリ</td> </tr>
<tr> <td>ハト</td>    <td>→</td> <td>メジロ</td> </tr>
</tbody>
</table>
</p>
上の記述で次のテーブル表示が得られます。この形をとれば、Javascriptが無効な 環境でも線で区切られたテーブルを表示することができます。

大型→ 小型
ワシ → スズメ
ペンギン→ ツバメ
ツル → チドリ
ハト → メジロ

クラス名がマッチする複数のテーブルに色が付けられます。

次のように<table>の属性を指定することにより 

<table class=hiTable style="text-align:center"
       lineColor=white     textColor=yellow   headTextColor=red
       headColor="#000088" oddColor="#335500" evenColor="#115500">
<thead><tr><th style="width:5em">大型</th><th style="width:2em">→</th>
       <th style="width:5em">小型</th></tr></thead>
<tbody>
<tr> <td>ワシ</td>    <td>→</td> <td>スズメ</td> </tr>
<tr> <td>ペンギン</td><td>→</td> <td>ツバメ</td> </tr>
<tr> <td>ツル</td>    <td>→</td> <td>チドリ</td> </tr>
<tr> <td>ハト</td>    <td>→</td> <td>メジロ</td> </tr>
</tbody>
</table>
テーブルの色を変更できます。

大型→ 小型
ワシ → スズメ
ペンギン→ ツバメ
ツル → チドリ
ハト → メジロ

 

hiSetTableColor()関数に<table>オブジェクトを与えることも可能です。 この場合クラス名は無関係に色付けがなされます。 

<table id=table1>....</table>
<script type="text/javascript">
hiSetTableColor(document.getElementById('table1'));
</script>

 Jqueryの使用

プログラムの大半は要素の検索のためのループです。 繰り返し要素を調べ条件に合致すればcssをセットしています。 Jquery.jsを使えばこのような要素検索のための煩わしい ループ処理、条件比較を書かずにすみます。

Jqueryを用いてテーブルに色を設定する例を ◆jQueryを使ってみる：クロスフェード画像切り替えなどに置きました。

 HTML5/CSS3で色を変える

2011/06/10：HTML5/CSS3を使ってテーブルの色を一行おきに変える 記事をHTML5/CSS3でtableを色を一行毎に変えるに置きました。

 フラットなテーブルのためのCSS(参考)

普通のテーブルは次のようなcss定義を用います。 

table.t{border:1px solid black ; border-collapse:collapse}
table.t td{border:1px solid black}
table.t th{border:1px solid black}
このcssクラス定義をtableで用い 
<table class=t style="text-align:center">
<thead><tr><th style="width:5em">大型</th><th style="width:2em">→</th>
       <th style="width:5em">小型</th></tr></thead>
<tbody>
<tr> <td>ワシ</td>    <td>→</td> <td>スズメ</td> </tr>
<tr> <td>ペンギン</td><td>→</td> <td>ツバメ</td> </tr>
<tr> <td>ツル</td>    <td>→</td> <td>チドリ</td> </tr>
<tr> <td>ハト</td>    <td>→</td> <td>メジロ</td> </tr>
</tbody>
</table>
の記述で次のテーブルを得る事ができます。

大型→ 小型
ワシ → スズメ
ペンギン→ ツバメ
ツル → チドリ
ハト → メジロ

 

 補足説明

具体例には説明したい本質以外の沢山の要素が含まれてしまいます。
それらの要素の内特に気になるものを説明します。

スクリプトに関して:

  • scriptの記述をコメント<!--～//-->で囲むことが 大昔は必須とされていましたが、現在は全くその必要ありません。
    javascriptがoffであっても問題は起こりません。
  • 関数定義と呼び出しを別<script>にしたのは、関数定義は別途.jsファイル などで用意することを想定したものです。
  • javascriptはHTML上の複数個所に分けて記述できます。
    分割記述をおこなってもHTML全体で一つのスコープを構成します。
    分割された記述は単純に連結された上で解釈されます。
  • 関数の呼び出しを記述の最後に置くのは<body onLoad=..>の代わりです。
    <body>を直接いじれない場合は良くあります。例えばブログであったり、 javadocであったりです。
    記述は読み込んだ時点で有効になります。この関数呼び出しは テーブルが有効になっている必要がありますので、呼び出しスクリプト はテーブル定義より後ろになくてはなりません。
    <body onLoad=..>を書くことができる場合はonLoadで呼び出す 方が確実です。
  • document.getElementById(名前)で指定idのオブジェクト、この 場合はテーブル、が得られます。テーブル定義ではid=名前で idを設定しています。
    name=で指定しgetElementByName()を使うことは避けた方が 無難です（ブラウザによって動いたり動かなかったりする他 HTML5ではどうなるのか。。。全く分かりません）
    多くの要素にアクセスするには余りにも長ったらしい表記と なりますので、次のような関数を作り 
      function $(id){return document.getElementById(id);}
    $(名前)で済ますことも現実的です。
    javascriptの関数名には$が使えますので、$()はごく普通の 関数定義です。
  • オブジェクトの持つ要素には".要素名"でアクセスできます。
    この例ではTABLEの行要素配列(TRの配列）をtable.rowsで取得しています。
    cssプロパティは".style.プロパティ名"でアクセスできます。
  • オブジェクトの属性へのアクセスはIEでは(オブジェクトがobject,属性がattrとして)
     object.attr
    という簡便な記述ができますが、 その他のブラウザでは
     object.getAttributeNode("attr").value
    というジュゲム記述を行う必要があります。ただし、style属性などは
     object.style.backgroundColor
    と簡便な書き方ができます。何というデタラメ！他の属性でも簡便な 記述を可能とすべきです。
  • 色はcssで名前が定義されている場合16進の代わりに名前を 指定できます。

TABLEに関して

  • TABLEの中の文字列を中央揃えにするにはTABLEのtext-alignプロパティ をcenterとします。 TABLEのalign属性はテーブルそのものの配置であり、 TRのalign属性を用いる場合は全TRに設定する必要があります。
  • bgcolor属性はbackgroundプロパティ、またはbackground-colorプロパティ に相当します。
  • 最初の例 でのTABLEの罫線はボーダーではなく、ボーダー線の 間に見えるバックグラウンドです。
    TABLEの線の無意味な凸凹表示は極めて見づらく 恐ろしくセンスの悪いものですが、 テーブルのバックグラウンド を黒、TDのバックグラウンドを白にすると、単純線として表示 することができます。
  • class属性は"class"がJavascriptのキーワードであるため"className"と なっています。なお連想配列式のアクセスtable["xxxx"]を行う場合 ブラウザによって"class"と"className"がありますので使用すべき ではありません。
  • style属性の要素"background-color"はJavascriptの名前として"-"が 使えないので"backgroundColor"となっています。

CSSに関して：絶対やってはならないこと

css記述の説明ではタグ(pやliなど)に直接プロパティ設定を行うものが 多く見られます。

   <style type="text/css">
      li{margin-top:1em;} <!-- WAO!!!こんなことをやってはならん -->
   </style>
これは絶対にやってはならないことです。

cssはスコープを持たない、コンパイラ屋が見ると卒倒しそうな、とんでもない 仕様を採っています。

例えば、ある<ul>の中だけで<li>のプロパティを設定しようと 

   <ul>
       <style type="text/css">li{margin-top:1em;}</style>
       <li>aaa</li>
       <li>bbb</li>
   </ul>
   <ul>
        <li>ccc</li>
        <li>ddd</li>
   </ul>
という記述を行った場合、普通のセンスの持ち主であれば、当然aaa,bbbは その影響を受けてもccc,dddは無関係と思うはずですが、違うのです。
<ul>ブロックとは無関係にcccもdddも影響を受けます。

さらにまずいことに、これは後ろに置いた定義で前にある要素が影響 を受ける場合もあるのです。

複雑な記述をする訳ではないのでその位いいだろうと習慣になって しまうと、そのうちとんでもない状況を引き起こすことになります。

css定義を行う場合は必ずクラスを付けるべきです。もちろんクラスを 付けても衝突は発生する可能性はありますが、問題が発生する可能性 を大きく下げることができます。 

   <ul>
       <style type="text/css">li.X{margin-top:1em;}</style>
       <li class=X>aaa</li>
       <li class=X>bbb</li>
   </ul>
   <ul>
        <li>ccc</li>
        <li>ddd</li>
   </ul>

寿限無名（jugemic-name;ジャッジメックネイム/ジュゲミックネイム)

無用に長い名前、あるいは長い組み合わせという意味です。
例えば、 

   PrintWriter  pw = new PrintWriter(
                        new BufferedWriter(
                           new OutputStreamWriter(
                               new FileOutputStream(
                                  new File(fileName)
                                 ,append)
                              ,charSet))
                       ,auto_flush);
のような長ったらしくかつ固定的で毎回書かなければならない馬鹿馬鹿しい名前並びに対して 
   WAO! It's too jugemic!!!!
というように使います。ウソです。

しかし長い名前程分かりやすくて間違いがないという幻想 によりコードが著しく見づらくなっている傾向は決して 望ましいものではありません。
何にも考えず長い名前にしておけばよいというのは間違って います。
とはいえ$(id)程短くするのは極めて限られた状況でのみ 許されるものであることも忘れてはなりません。

document.じゅげむじゅげむ.ごこうのすりきれ.かいじゃりすいぎょのすいぎょうまつ うんぎょうまつふうらいまつ.くうねるところにすむところ.やぶらこうじのぶらこうじ. パイポパイポ.パイポのシューリンガン.シューリンガンのグーリンダイ.グーリンダイ のポンポコピーのポンポコナーの.getElementの.ちょうきゅーめいの.byId("table1") がテーブルオブジェクトを返したところ。。。タイムアウトしていた。

 ＃＃＃

(2010/6/25):実用的な関数と、フラットなテーブルの説明追加

2010年5月 5日 (水) パソコン・インターネット |

« ◆摩擦帯電の仕組み：拡散容積比モデル | トップページ | ◇BNFに構文選択プロパティ記述法追加拡張 »

トラックバック


この記事へのトラックバック一覧です： ◇HTMLのTABLEの色を１行おきに変える方法:

« ◆摩擦帯電の仕組み：拡散容積比モデル | トップページ | ◇BNFに構文選択プロパティ記述法追加拡張 »