JS中table隔行换色
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title></title> 6 ????</head> 7 ????<body> 8 ????????<table id="tab1" border="" cellspacing="" cellpadding="" width="40%"> 9 ????????<thead>10 ????????????<tr>11 ????????????????<td>ID</td>12 ????????????????<td>姓名</td>13 ????????????????<td>年龄</td>14 ????????????</tr>15 ????????</thead>16 ????????<tbody>17 ????????????<tr>18 ????????????????<td>1</td>19 ????????????????<td>张三</td>20 ????????????????<td>27</td>21 ????????????</tr>22 ????????????<tr>23 ????????????????<td>2</td>24 ????????????????<td>李四</td>25 ????????????????<td>20</td>26 ????????????</tr>27 ????????????<tr>28 ????????????????<td>3</td>29 ????????????????<td>张可爱</td>30 ????????????????<td>29</td>31 ????????????</tr>32 ????????????<tr>33 ????????????????<td>4</td>34 ????????????????<td>李XX</td>35 ????????????????<td>24</td>36 ????????????</tr>37 ????????????<tr>38 ????????????????<td>5</td>39 ????????????????<td>马小关</td>40 ????????????????<td>35</td>41 ????????????</tr>42 ????????</tbody> ???43 ????????</table>44 ????</body>45 ????<script type="text/javascript">46 ????????window.onload = function(){47 ????????????48 ????????????var oTab = document.getElementById("tab1");49 ????????????var oldColor = "";50 ????????????//鼠标移到单元格上变色51 ????????????for(var i=0;i<oTab.tBodies[0].rows.length;i++){52 ????????????????53 ????????????????oTab.tBodies[0].rows[i].onmouseover=function(){54 ????????????????????oldColor = this.style.background;55 ????????????????????this.style.background = "yellow"; ???56 ????????????????}57 ????????????????58 ????????????????oTab.tBodies[0].rows[i].onmouseout=function(){59 ????????????????????this.style.background = oldColor; ???60 ????????????????}61 ????????????????62 ????????????????//实现各行换色63 ????????????????if(i%2==0){64 ????????????????????oTab.tBodies[0].rows[i].style.background = "#ccc";65 ????????????????}else{66 ????????????????????oTab.tBodies[0].rows[i].style.background = "";67 ????????????????}68 ????????????????69 ????????????}70 ????????}71 ????</script>72 </html>08-JS中table隔行换色
原文地址：http://www.cnblogs.com/liuxuanhang/p/7811134.html