js控制表格隔行變色
阿新 • • 發佈：2018-08-31
ble doctype .com out htm 圖片 技術 ext 鼠標
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js控制隔行變色</title>
</head>
<body>
<table id="tb1" border="1" border-collapse="collapse" cellpadding="5" width="400" height="20" cellspacing="0" bordercolor="#99cccc">
<thead>
<tr>
<td>編號</td>
<td>作品</td>
<td>時間</td>
</tr>
</thead>
<tbody id="tb2">
<tr>
<td>1</td>
<td>回憶三部曲</td>
<td>1995</td>
</tr>
<tr>
<td>2</td>
<td>未麻的部屋</td>
<td>1997</td>
</tr>
<tr>
<td>3</td>
<td>千年女優</td>
<td>2001</td>
</tr>
<tr>
<td>4</td>
<td>妄想代理人</td>
<td>2004</td>
</tr>
<tr>
<td>5</td>
<td>紅辣椒</td>
<td>2006</td>
</tr>
<tr>
<td>6</td>
<td>東京教父</td>
<td>2003</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
window.onload=function tablecolor(){
var t_name = document.getElementById("tb2");
var t_len = t_name.getElementsByTagName("tr");
for(var i=0;i<=t_len.length;i++){
//偶數行時執行
if(i%2 == 0){
t_len[i].style.backgroundColor="#ffcccc";
//添加鼠標經過事件
t_len[i].onmouseover = function(){
this.style.backgroundColor="#ccffff"
}
//添加鼠標離開事件
t_len[i].onmouseout = function(){
this.style.backgroundColor="#ffcccc"
}
}
else{
t_len[i].style.backgroundColor="#ffffcc";
t_len[i].onmouseover = function(){
this.style.backgroundColor="#ccffff"
}
t_len[i].onmouseout = function(){
this.style.backgroundColor="#ffffcc"
}
}
}
}
</script>
</body>
</html>
js控制表格隔行變色