利用JS實現H5中的Table表格的隔行換色
阿新 • • 發佈：2019-01-25
最近正在學習前端的知識，正好進行到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>