<!-- テーブルの行をストライプに -->
<style type="text/css">
table.stripe {
border:0;
border-spacing:0;
border-collapse:collapse;
margin:0; padding:0;
}
table.stripe th {
border:1px solid #ccc;
background-color:#666;
color:#fff;
}
table.stripe td {
border:1px solid #ccc;
}
table.stripe tr.bg02{
background:#eee;
}
</style>
<form action="#">
<input type="button" onclick="fStripeTable()" value="行をストライプにする" />
</form>
<br>
<table class="stripe">
<caption>《検索サイト》</caption>
<tr>
<th>サイト名</th>
<th>URL</th>
</tr>
<tr>
<td>Yahoo! JAPAN</td>
<td>http://www.yahoo.co.jp/</td>
</tr>
<tr>
<td>Google</td>
<td>http://www.google.co.jp/</td>
</tr>
<tr>
<td>goo</td>
<td>http://www.goo.ne.jp/</td>
</tr>
<tr>
<td>Infoseek</td>
<td>http://www.infoseek.co.jp/</td>
</tr>
</table>
<script type="text/javascript">
function fStripeTable(){
var tblObjAry=document.getElementsByTagName("table");
for (var i=0; i<tblObjAry.length; i++){
var tblObj=tblObjAry[i];
if(tblObj.className=="stripe"){
var rows=tblObj.getElementsByTagName("tr");
for (var i=1; i<rows.length; i++){
rows[i].className="bg02";
i++;
}
}
}
}
</script>