在<head></head>內定義表格的樣式
<head>
table{width:400px;border:1px solid #6666FF}
table th{background-color:#999999;text-align:center}
table td{text-align:center;}
tr.a1 td{background-color:#00CC99;}
tr.a2 td{background-color:#99CC33;}
tr.a3 td{background-color:#0000FF;}
table th{background-color:#999999;text-align:center}
table td{text-align:center;}
tr.a1 td{background-color:#00CC99;}
tr.a2 td{background-color:#99CC33;}
tr.a3 td{background-color:#0000FF;}
</head>
在body中寫出table的HTML。然後再table後面寫上JS
<table>
<tr><td></td><td></td></tr>
<script language="javascript">
var tabled=document.getElementById('表格的ID').getElementsByTagName('tr');
function hh(){
for(var i=0;i<tabled.length;i++){
tabled[i].className=(i%2==0)?"a1":"a2";
tabled[i].onmouseover=function(){this.tempClass=this.className;this.className="a3"};
tabled[i].onmouseout=function(){this.className=this.tempClass}
}
}
window.onload=hh;
</script>
注意:要是把JS碼放在HEAD裡面，會出現document.getElementById('表格ID');不是對象或為空，主要是因為程式碼由上往下執行，要讓table全部顯示後，才可以抓到table的ID唷。
沒有留言:
張貼留言