フォノクラフト株式会社:作業メモや備忘録など

作業メモや備忘録など…

[JS] テーブルを交互に色を付ける

without comments

使い道

プログラムでeven/oddと処理するのが面倒な時に有用。ただ行数が多いと奇麗に出ない場合がある。

サンプル

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

ダウンロード

ソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
	$(document).ready(function(){
		$("table#test").each(function(){
		$(this).find("tr:odd").addClass("odd");
		});
	});
</script>
<style type="text/css">
	table#test {
	width:100%;
	border: 1px solid #cccccc;
	border-collapse: collapse;
	background:#F6F5F0;
	}
	table#test td {
	border: 1px solid #cccccc;
	padding:10px;
	}
	table#test tr.odd td {
	background-color: #ffffff;
	padding:10px;
	}
</style>
</head>
<body>
	<table id="test">
	<tr><td>aaaaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaaaa</td></tr>
	<tr><td>aaaaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaaaa</td></tr>
	<tr><td>aaaaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaaaa</td></tr>
	<tr><td>aaaaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaaaa</td></tr>
	<tr><td>aaaaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaaaa</td></tr>
	<tr><td>aaaaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaaaa</td></tr>
	<tr><td>aaaaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaaaa</td></tr>
	<tr><td>aaaaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaaaa</td></tr>
	<tr><td>aaaaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaaaa</td></tr>
	<tr><td>aaaaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaaaa</td></tr>
	</table>
</body>
</html>