「jQuery」でテーブルの行毎に色を替える


「jQuery」を使用してテーブルをみやすくしてみる。以下使用例

フリーソフト

Name
+Lhaca ファイルの圧縮・解凍
FFFTP FTPソフト Version 1.96d [2008/9/23]
TeraPad シンプルなSDIタイプのテキストエディタ。Ver.0.93 (2008/05/08)
GetHTMLW サイトを丸ごとダウ ンロード。
Paint.NET グラフィックソフト
EDGE 256色専用のドット絵エディタ
D&D画像変換 ドラッグ&ドロップでbmp,jpg,png,gif,ico,mag,eriの相互変換・細工・サイズ設定
Namery ファイル名や拡張子を一括変更

以下のように記述するだけで偶数行の背景色を指定できます。ちょっと便利です。

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
	$(".stripe tr:even").addClass("even");
});
</script>
<style type="text/css">
.stripe {
	border: 1px solid #999;
	border-collapse: collapse;
}
.stripe th {
	border: 1px solid #999;
	color: #000;
	background-color: #63c5e1;
}
.stripe  tr {
	border: 1px solid #999;
	background-color: #fff;
	padding:5px;
}
.stripe  tr.even td {
	background-color: #def0fc;
}
.stripe  td {
	border: 1px solid #999;
	padding: 0 0.75em;
}
.name1{
	width:100px;
}
.name2{
	width:480px;
}
</style>
<table class="stripe">
	<tr>
		<th class="name1">名前1</th>
		<th class="name2">名前2</th>
	</tr>
	<tr><td>1行目左列</td><td>1行目右列</td></tr>
	<tr><td>2行目左列</td><td>2行目右列</td></tr>
	<tr><td>3行目左列</td><td>3行目右列</td></tr>
	<tr><td>4行目左列</td><td>4行目右列</td></tr>
</table>
</body>
</html>

関連記事

コメントを残す

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

*