HTMLのテーブルを1段ごとに色違いにするJavaScript
HTMLのテーブルを1段ごとに色違いにするJavaScriptを、ふと思って作ってみました。
prototype.jsを使いましたが、なくてもいける短いソースです。
使い方
startTableというクラスからスタートして、endTableクラスまで奇数、偶数のtrにclassをつけていきます。endTableがなければ最後まで処理を続けます。指定したいテーブルには、idをつけておいてください。
確認
ff2でしか確認していません。
たぶん、他でも動きそう
ソース
<table cellpadding="0" cellspacing="0" border="1" id="targetTable"> <tr> <th>あれこれ</th> <td>どこそこ</td> </tr> <tr class="startTable"> <th>あれこれ</th> <td>どこそこ</td> </tr> <tr> <th>あれこれ</th> <td>どこそこ</td> </tr> <tr> <th>あれこれ</th> <td>どこそこ</td> </tr> <tr> <th>あれこれ</th> <td>どこそこ</td> </tr> <tr class="endTable"> <th>あれこれ</th> <td>どこそこ</td> </tr> <tr> <th>あれこれ</th> <td>どこそこ</td> </tr> </table>
function tableDifferent(targetTable, evenClassName, oddClassName){ var elements= $(targetTable).getElementsByTagName('tr'); var startFlag = ''; for(var i=0; i<elements.length; i++){ if(elements[i].className == 'startTable'){ startFlag = 1; } if(elements[i].className == 'endTable'){ startFlag = ''; } if(startFlag == 1 && i%2 == 0){ elements[i].className += evenClassName; }else{ elements[i].className += oddClassName; } } }