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の部分はお好きな色のカラーコードにしてください。
すると自動でこうなります。
奇数行だけ自動で先ほどカラーコードで指定した色をつけてくれます。
うん、すごく便利。
関連記事
-
EC-CUBEのデータベース接続先を開発環境と本番環境で自動で分ける方法
EC-CUBEのカスタマイズや構築をしているとき、いきなり本番環境をいじることが出来ない場合
-
XAMPPインストール時にapacheが起動しないときは・・・
PHP & MySQLをローカルでテストするときによく使うXAMPPですが、apacheを起
-
ロリポップサーバーでCGIなどが動かなくなった場合の対処法
今回のロリポップのwordpressへの大規模ハッキングをうけて、ロリポップ側でいろいろ対応が始まっ
-
レスポンシブWEBデザインに対応するニュースティッカーをjQueryとbootstrap3を使って作ってみた。
ニュースティッカーをレスポンシブWEBサイトで実装することになりましたので、作ってみたのです
-
ファーストサーバーにwordpressの新規に手動でインストールしてみた
OSS簡単インストール機能という簡単インストール機能は一応ファーストサーバーのコンフィグレータにはあ
-
オープンソースの顧客管理システムL03の顧客情報の追加できる項目数を10から30に増やしてみた。
sugarCRMと迷ったのですが、sugarCRMは機能が多すぎて面倒そうなので、シンプルなこちらを
-
2.ConoHaVPSにSFTPでとりあえずログインする方法
前回に引き続き、今回はConoHaにSFTPで接続する方法です。 前回の設定でSSH接
-
たまごカートの広告媒体管理のトラッキングパラメーターをad_codeから変更する方法
定期購入サービス向けのショッピングカート たまごカートのカスタマイズ情報です。 たまごカートでは、
-
3.ConoHaVPSで複数ドメインを割り当てるためにVirtual Hostsを設定する
次に、ConoHa VPSに複数のドメインを割り当てる際のVirtual Hostsの設定を
-
バイラルメディアはクソだ、とか否定してるけど、あなたには絶対に運営できないと思うよ
ここ最近、バイラルメディアに関する議論やヘイト記事をよく目にします。 twitterでお世
Additional comments powered byBackType
Comment
This comment was originally posted on Twitter
This comment was originally posted on Twitter