アシノスキマ A monologue of giraffe.LA (jimdo) web top

tableの偶数行・奇数行などをわける。

tableを一行ごとに背景色をかえる。tableを指定する。

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;
}

jqueryと併用してtableの行ごとにtrにセレクタふる簡易script
※こちらの都合で.jsではなく.txtです。適当にrenameしてください。
※jqueryありきです。
※偶数行で背景かえる・・・とかに使っています。
table_even_color.txt
テキスト文書 190 Bytes

コメントをお書きください

コメント: 2
  • #1

    Gervase (日曜日, 22 7月 2012 09:43)

    I just love this site, its amazing and awesome and really speaks to you|I have activated to your rss feed which need to do the trick! Use a nice evening!

  • #2

    buytadalafilonline (水曜日, 07 11月 2012 05:37)

    I intended to draft you this bit of remark in order to say thank you once again for the pretty guidelines you've documented here. It is quite strangely open-handed of you to present unhampered precisely what a lot of people could have made available as an electronic book to generate some cash for themselves, and in particular now that you could have tried it if you decided. Those good tips likewise served as a good way to recognize that some people have a similar dream the same as my personal own to understand a whole lot more concerning this condition. I am sure there are lots of more fun periods ahead for many who take a look at your website.

jump_top