query.js+α を

自分メモとして。

テーブルやブロック範囲を指定して一行ごとの背景をかえる　query.js+α
シンプルにほしい機能だけjs。

・html全部解析して処理させたくない。
・ほしいのだけまとめたjsつくるほうが、いろいろなライブラリカスタマイズするよりらくかもしれないとか。

たくさんのライブラリさんにお世話になっているし、明には絶対つくれないものなので、
あくまでも、使いどころ次第です。


-- what？ ----
指定範囲・またはテーブルのeven行（tr）にdomでclassを付加する。
<tr>
↓
実行
↓
<tr class="evenLine">


html header 内--------------

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/table_even_color.js" charset="utf-8"></script>

※jquery.js必須です。

js 内--------------

$(document).ready(function(){
  $('table#aaa tr:even').addClass('evenLine');
  $('table.bbb tr:even').addClass('evenLine');
  $('aside tr:even').addClass('evenLine');
  $('div#ccc tr:even').addClass('evenLine');
});

※evenLine　は付加されるセレクタ名。任意

html body 内--------------

<!-- table#aaa -->
<table id="aaa" summary="aaa_list">
  <caption>test</caption>
  ･･･いろいろなものを省略･･･
</table>

<!-- table.bbb -->
<table class="bbb" summary="aaa_list">
  <caption>test</caption>
  ･･･いろいろなものを省略･･･
</table>

<!-- aside table  -->
<aside>
  <table summary="aaa_list">
    <caption>test</caption>
    ･･･いろいろなものを省略･･･
  </table>
</aside>

<!-- div#ccc table  -->
<div id="ccc">
  <table summary="aaa_list">
    <caption>test</caption>
    ･･･いろいろなものを省略･･･
  </table>
</div>


css 内--------------
tr.evenLine th,
tr.evenLine td{
    background-color:#f1f1f1;
}