<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>表格隔行變色</title>
? <style type="text/css">
? ? ? *{
? ? ? ? ? margin:0;padding: 0;
? ? ? }
? ? ? table{
? ? ? ? ? width:500px;
? ? ? ? ? position:relative;
? ? ? ? ? margin:100px auto;
? ? ? ? ? border-collapse:collapse;
? ? ? ? ? /*合并表格單一邊框*/
? ? ? ? ? border:1px solid #d7d7d7;
? ? ? }
? ? ? thead tr{
? ? ? ? ? background-color:#ccc;
? ? ? ? ? height:30px;
? ? ? }
? ? ? table tr{
? ? ? ? ? text-align: center;
? ? ? ? ? height:30px;
? ? ? }
? ? ? .bg{
? ? ? ? ? background: #eee;
? ? ? }
</style>
</head>
<body>
<table ?border=1>
? ? <thead>
? ? ? ? <tr>
? ? ? ? ? ? <td width="40">序號</td>
? ? ? ? ? ? <td width="100">前端單詞</td>
? ? ? ? ? ? <td width="80">基本釋義</td>
? ? ? ? ? ? <td width="50">長度</td>
? ? ? ? ? ? <td width="">補充</td>
? ? ? ? </tr>
? ? </thead>
? ? <tbody>
? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ?<td>1</td>
? ? ? ? ? ? ? ? ? ?<td>select</td>
? ? ? ? ? ? ? ? ? ?<td>選擇</td>
? ? ? ? ? ? ? ? ? ?<td>6</td>
? ? ? ? ? ? ? ? ? ?<td>-</td>
? ? ? ? ? ? ?</tr>
? ? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ? ? ?<td>2</td>
? ? ? ? ? ? ? ? ? ?<td>target</td>
? ? ? ? ? ? ? ? ? ?<td>目標(biāo)</td>
? ? ? ? ? ? ? ? ? ?<td>6</td>
? ? ? ? ? ? ? ? ? ?<td>-</td>
? ? ? ? ? ? ?</tr>
? ? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ? ? ?<td>3</td>
? ? ? ? ? ? ? ? ? ?<td>input </td>
? ? ? ? ? ? ? ? ? ?<td>輸出</td>
? ? ? ? ? ? ? ? ? ?<td>5</td>
? ? ? ? ? ? ? ? ? ?<td>-</td>
? ? ? ? ? ? ?</tr>
? ? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ? ? ?<td>4</td>
? ? ? ? ? ? ? ? ? ?<td>button</td>
? ? ? ? ? ? ? ? ? ?<td>按鈕</td>
? ? ? ? ? ? ? ? ? ?<td>8</td>
? ? ? ? ? ? ? ? ? ?<td>-</td>
? ? ? ? ? ? ?</tr>
? ? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ? ? ?<td>5</td>
? ? ? ? ? ? ? ? ? ?<td>checkbox</td>
? ? ? ? ? ? ? ? ? ?<td>復(fù)選框</td>
? ? ? ? ? ? ? ? ? ?<td>8</td>
? ? ? ? ? ? ? ? ? ?<td>-</td>
? ? ? ? ? ? ?</tr>
? ? </tbody>
</table>
<script>
? ? //1、獲取tbody里面的所有的行
? ? var trs = document.querySelector('tbody').querySelectorAll('tr');
? ? //2、利用循環(huán)注冊事件
? ? for(var i = 0;i<trs.length;i++){
? ? ? ? var bgc = function(e){this.className = 'bg';}
? ? ? ? trs[i].addEventListener('mouseover',bgc)
? ? ? ? trs[i].onmouseout = function(){
? ? ? ? ? ? this.className = '';
? ? ? ? }
? ? }
</script>
</body>
</html>

顯示效果：

當(dāng)鼠標(biāo)滑過時：