[JS] テーブルを交互に色を付ける
使い道
プログラムでeven/oddと処理するのが面倒な時に有用。ただ行数が多いと奇麗に出ない場合がある。
サンプル
| aaaaaaaaaaaaaaaa | aaaaaaaaaaaaaaaa |
| aaaaaaaaaaaaaaaa | aaaaaaaaaaaaaaaa |
| aaaaaaaaaaaaaaaa | aaaaaaaaaaaaaaaa |
| aaaaaaaaaaaaaaaa | aaaaaaaaaaaaaaaa |
| aaaaaaaaaaaaaaaa | aaaaaaaaaaaaaaaa |
ダウンロード
ソース
<!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>