最近正在學習前端的知識,正好進行到JS的基礎階段,為了以後更好的找一份工作,開始自己的技術部落格的學習階段,下面是剛學習的結果,今天有三個作業,分別是利用JS實現Table的隔行換色,有一點點事件的繫結問題,自己第一次寫技術部落格,大家且將就著看,也有參考別人的內容,比如自己美感不好,找了一個別人選的挺好看的顏色,廢話不多說,直接上程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<table id="Tab" align="center" width="70%" rules="all" cellspacing="0" cellpadding="2" border="1">
	<tr>
		<td>11</td>
		<td>12</td>
		<td>13</td>
	</tr>
	<tr>
		<td>21</td>
		<td>22</td>
		<td>23</td>
	</tr>
	<tr>
		<td>31</td>
		<td>32</td>
		<td>33</td>
	</tr>
	<tr>
		<td>41</td>
		<td>42</td>
		<td>43</td>
	</tr>
	<tr>
		<td>51</td>
		<td>52</td>
		<td>53</td>
	</tr>
	<tr>
		<td>71</td>
		<td>72</td>
		<td>73</td>
	</tr>
	<tr>
		<td>61</td>
		<td>62</td>
		<td>63</td>
	</tr>
	<tr>
		<td>81</td>
		<td>82</td>
		<td>83</td>
	</tr>
	<tr>
		<td>81</td>
		<td>82</td>
		<td>83</td>
	</tr>
	</table>
</body>
<script>
	 window.onload= function () {
		var Tab = document.getElementById("Tab");
                var trs = Tab.getElementsByTagName("tr");//是Tab下的tr行,所以使用的Tab.getElementsByTagName
		for(var i = 0; i < trs.length;i++) {     //迴圈所有的行
                if(i % 2 == 0) {                 //進行偶數判斷,從而完成各行變色
                    trs[i].style.backgroundColor= "#888";
                }
            }
        };
</script>
</html>