jqueryでtableに一行飛ばしで背景色を付ける方法

公開日: : 最終更新日:2013/12/31 WEB製作 , , , ,

Pocket

 

image

最近はちょっと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>

http://c-brains.jp/blog/wsg/09/01/29-164222.php

そして、CSSに以下を追加

table tr.even td {
    background: #ffcc99;
}

#ffcc99の部分はお好きな色のカラーコードにしてください。

 

すると自動でこうなります。

image

奇数行だけ自動で先ほどカラーコードで指定した色をつけてくれます。

 

うん、すごく便利。

関連記事

スクリーンショット 2011-08-18 23.17.09.png

素人でも【本当に】簡単に更新できるオープンソースCMS concrete5をインストールしてみた。

concrete5とは、ウェブサーバー上で、誰でも簡単で、しかも直感的にホームページの運営管理が出

記事を読む

conoha3-thumb

3.ConoHaVPSで複数ドメインを割り当てるためにVirtual Hostsを設定する

次に、ConoHa VPSに複数のドメインを割り当てる際のVirtual Hostsの設定を

記事を読む

たまごカート

たまごカートの広告媒体管理のトラッキングパラメーターをad_codeから変更する方法

定期購入サービス向けのショッピングカート たまごカートのカスタマイズ情報です。 たまごカートでは、

記事を読む

viralmedia

バイラルメディアはクソだ、とか否定してるけど、あなたには絶対に運営できないと思うよ

ここ最近、バイラルメディアに関する議論やヘイト記事をよく目にします。 twitterでお世

記事を読む

xampp

XAMPPインストール時にapacheが起動しないときは・・・

PHP & MySQLをローカルでテストするときによく使うXAMPPですが、apacheを起

記事を読む

screenshot 2013-09-30 17.49.57

レスポンシブWEBデザインに対応するニュースティッカーをjQueryとbootstrap3を使って作ってみた。

ニュースティッカーをレスポンシブWEBサイトで実装することになりましたので、作ってみたのです

記事を読む

no image

ロリポップサーバーでCGIなどが動かなくなった場合の対処法

今回のロリポップのwordpressへの大規模ハッキングをうけて、ロリポップ側でいろいろ対応が始まっ

記事を読む

no image

オープンソースの顧客管理システムL03の顧客情報の追加できる項目数を10から30に増やしてみた。

sugarCRMと迷ったのですが、sugarCRMは機能が多すぎて面倒そうなので、シンプルなこちらを

記事を読む

index

【難しく考えすぎ!?】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方

「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここま

記事を読む

EC-CUBEのデータベース接続先を開発環境と本番環境で自動で分ける方法

EC-CUBEのデータベース接続先を開発環境と本番環境で自動で分ける方法

EC-CUBEのカスタマイズや構築をしているとき、いきなり本番環境をいじることが出来ない場合

記事を読む

2 Tweets

Comment

  1. 匿名 より:

    This comment was originally posted on Twitter

  2. 匿名 より:

    This comment was originally posted on Twitter

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

WP-SpamFree by Pole Position Marketing

Additional comments powered byBackType

viralmedia
バイラルメディアはクソだ、とか否定してるけど、あなたには絶対に運営できないと思うよ

ここ最近、バイラルメディアに関する議論やヘイト記事をよく目にします

conoha3-thumb
3.ConoHaVPSで複数ドメインを割り当てるためにVirtual Hostsを設定する

次に、ConoHa VPSに複数のドメインを割り当てる際のVi

conoha2-thumb
2.ConoHaVPSにSFTPでとりあえずログインする方法

前回に引き続き、今回はConoHaにSFTPで接続する方法です

surface-thumb
今更Surface Pro 3ファーストインプレッション #surfaceJP #SurfacePro3

サブ用に使用していたMBAを手放したので、メインのMBP 15

highdpi-chrome
Surface Pro 3のChromeで文字がボケる問題の最新解消法 #surfaceJP

Surface Pro 3をゲットしてきました。 Core i7

→もっと見る

  • WordPressテーマ「GENSEN(TCD050)」
  • WEBデザイナーの為のWEBデザインギャラリー
PAGE TOP ↑