jqueryでtableに一行飛ばしで背景色を付ける方法
最近はちょっとandroidからは離れてhtml,PHP ,Javascript関係を勉強してます。
jqueryがかなり便利なことに今更気づいた久米です。
今回は、jqueryで、tableを簡単に装飾数方法をメモしておきます。
borderだけではみづらいことのあるtableを、一行おきに自動で背景色を付けてくれるjQueryのスクリプトを。
まず、jQueryを使うために、<head>に以下の記述。
以下のコードはwordpressの場合を想定してます。
<!–jquery呼び出し–>
<script type="text/javascript" src="<?php bloginfo(‘template_directory’);?>/jquery-1.6.1.min.js"></script>
設定したテンプレートのルートにjquery-1.6.1.min.jsをおいておきます。
次に、tableの行数を判定して、奇数行にevenというクラスを負荷するスクリプトを。
<script type="text/javascript">
$(document).ready(function(){
$("table").each(function(){
jQuery(this).find("tr:even").addClass("even");
});
});
</script>
そして、CSSに以下を追加
table tr.even td {
background: #ffcc99;
}
#ffcc99の部分はお好きな色のカラーコードにしてください。
すると自動でこうなります。
奇数行だけ自動で先ほどカラーコードで指定した色をつけてくれます。
うん、すごく便利。
関連記事
-
-
ロリポップサーバーでCGIなどが動かなくなった場合の対処法
今回のロリポップのwordpressへの大規模ハッキングをうけて、ロリポップ側でいろいろ対応が始まっ
-
-
バイラルメディアはクソだ、とか否定してるけど、あなたには絶対に運営できないと思うよ
ここ最近、バイラルメディアに関する議論やヘイト記事をよく目にします。 twitterでお世
-
-
たまごカートの広告媒体管理のトラッキングパラメーターをad_codeから変更する方法
定期購入サービス向けのショッピングカート たまごカートのカスタマイズ情報です。 たまごカートでは、
-
-
素人でも【本当に】簡単に更新できるオープンソースCMS concrete5をインストールしてみた。
concrete5とは、ウェブサーバー上で、誰でも簡単で、しかも直感的にホームページの運営管理が出
-
-
レスポンシブWEBデザインに対応するニュースティッカーをjQueryとbootstrap3を使って作ってみた。
ニュースティッカーをレスポンシブWEBサイトで実装することになりましたので、作ってみたのです
-
-
【絶対に知っておかなきゃいけない】紙媒体とWEBデザインにおけるデザイン作法の違いについて #デザイン#web
最近、紙媒体のデザインとWEBのデザインでは、結構作法が違うところが多いなぁ、と思うことが増えてきた
-
-
オープンソースの顧客管理システムL03の顧客情報の追加できる項目数を10から30に増やしてみた。
sugarCRMと迷ったのですが、sugarCRMは機能が多すぎて面倒そうなので、シンプルなこちらを
-
-
EC-CUBEのデータベース接続先を開発環境と本番環境で自動で分ける方法
EC-CUBEのカスタマイズや構築をしているとき、いきなり本番環境をいじることが出来ない場合
-
-
2.ConoHaVPSにSFTPでとりあえずログインする方法
前回に引き続き、今回はConoHaにSFTPで接続する方法です。 前回の設定でSSH接
-
-
【難しく考えすぎ！？】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方
「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここま
Additional comments powered byBackType
Comment
This comment was originally posted on Twitter
This comment was originally posted on Twitter