jQuery学习(四)——使用JQ完成表格隔行换色
1、步骤分析：
第一步：引入jquery的类库
第二步：直接写页面加载函数
第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)
第四步：分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。
2、具体代码实现：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成表格隔行换色</title> 6 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 7 <script> 8 //1.页面加载 9 $(function(){ 10 //2.获取tbody下面的偶数行并设置背景颜色 11 $("tbody tr:even").css("background-color","gold"); 12 //3.获取tbody下面的奇数行并设置背景颜色 13 $("tbody tr:odd").css("background-color","pink"); 14 }); 15 </script> 16 </head> 17 <body> 18 <table border="1" width="500" height="50" align="center" id="tbl" id="tbl"> 19 <thead> 20 <tr> 21 <th>编号</th> 22 <th>姓名</th> 23 <th>年龄</th> 24 </tr> 25 </thead> 26 <tbody> 27 <tr > 28 <td>1</td> 29 <td>张三</td> 30 <td>22</td> 31 </tr> 32 <tr > 33 <td>2</td> 34 <td>李四</td> 35 <td>25</td> 36 </tr> 37 <tr > 38 <td>3</td> 39 <td>王五</td> 40 <td>27</td> 41 </tr> 42 <tr > 43 <td>4</td> 44 <td>赵六</td> 45 <td>29</td> 46 </tr> 47 <tr > 48 <td>5</td> 49 <td>田七</td> 50 <td>30</td> 51 </tr> 52 <tr > 53 <td>6</td> 54 <td>汾九</td> 55 <td>20</td> 56 </tr> 57 </tbody> 58 </table> 59 </body> 60 </html>
3、真正开发时一般CSS样式已经由美工写好，此时可以使用jquery的CSS类操作
具体代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成表格隔行换色</title> 6 <link rel="stylesheet" href="../css/style.css" /> 7 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 8 <script> 9 //1.页面加载 10 $(function(){ 11 //2.获取tbody下面的偶数行并设置背景颜色 12 $("tbody tr:even").addClass("even"); 13 //3.获取tbody下面的奇数行并设置背景颜色 14 $("tbody tr:odd").addClass("odd"); 15 }); 16 </script> 17 </head> 18 <body> 19 <table border="1" width="500" height="50" align="center" id="tbl" id="tbl"> 20 <thead> 21 <tr> 22 <th>编号</th> 23 <th>姓名</th> 24 <th>年龄</th> 25 </tr> 26 </thead> 27 <tbody> 28 <tr > 29 <td>1</td> 30 <td>张三</td> 31 <td>22</td> 32 </tr> 33 <tr > 34 <td>2</td> 35 <td>李四</td> 36 <td>25</td> 37 </tr> 38 <tr > 39 <td>3</td> 40 <td>王五</td> 41 <td>27</td> 42 </tr> 43 <tr > 44 <td>4</td> 45 <td>赵六</td> 46 <td>29</td> 47 </tr> 48 <tr > 49 <td>5</td> 50 <td>田七</td> 51 <td>30</td> 52 </tr> 53 <tr > 54 <td>6</td> 55 <td>汾九</td> 56 <td>20</td> 57 </tr> 58 </tbody> 59 </table> 60 </body> 61 </html>
在谷歌浏览器内运行，就实现了表格隔行换色的效果。
