Javascriptは表の行間隔の表示色と強調表示を単純に実装します。

次のようにコードをコピーします。

<script type="text/javascript">

var name; // tr オブジェクトのクラス名を保存し、マウスを離すと復元します。

function trcolor(){ //表の行の色間隔表示

var tabNode = document.getElementsByTagName("テーブル")[0];

var trNodes = tabNode.rows;

for(var x=1;x<trNodes.length;x++){

if(x%2 == 1)

trNodes[x].className = "1";

それ以外

trNodes[x].className = "2";

trNodes[x].onmouseover = function(){ //ハイライト

名前 = this.className;

this.className = "以上";

}

trNodes[x].onmouseout = function(){ //onmouseout イベント属性を tr オブジェクトに追加

this.className = 名前;

}

}

}

window.onload = trcolor;

</script>

<style type="text/css">

テーブル{ 幅:60%; ボーダー:実線 1px #0066FF;}

テーブル td {border:solid 1px #0099ff;}

a{ テキスト装飾: なし;}

.one{背景色: 赤;}

.two{背景色: 青;}

.over{背景色: 黄色;}

</スタイル>

</head>

<本文>

<テーブル>

<tr>

<td>名前</td><td>年齢</td><td>住所</td>

</tr>

<tr>

<td>張三</td><td>23</td><td>北京</td>

</tr>

<tr>

<td>李思</td><td>25</td><td>上海</td>

</tr>

<tr>

<td>王五</td><td>15</td><td>広州</td>

</tr>

<tr>

<td>唐さん</td><td>20</td><td>長沙</td>

</tr>

</テーブル>

</body>