jQuery:表格的奇偶行变色 <html> <head> <title>表格变色</title> <style type="text/css"> .odd{background:#ffffee;} .even{background:#fff38f;} .first{background:red;} .last{background:blue;} .mouseOver{background:green;} </style> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ $("tr:odd").addClass("odd"); //加奇行样式 $("tr:even").addClass("even"); //加偶行样式 $("tr:first").addClass("first"); //为第一行加样式 $("tr:last").addClass("last"); //为最后行加样式 //为行元素加上鼠标移入和移出事件 $("tr").mouseover(function() { $(this).addClass("mouseOver") //加上样式 }).mouseout(function() { $(this).removeClass("mouseOver")//去掉样式 }); }) </script> </head> <body> <table border="1"> <tr><td>姓名</td><td>年龄</td></tr> <tr><td>王华</td><td>18</td></tr> <tr><td>刘云</td><td>19</td></tr> <tr><td>刘亮</td><td>15</td></tr> <tr><td>叶子</td><td>17</td></tr> <tr><td>刘梦</td><td>20</td></tr> </table> </body> </html>
也许,有的网友会问:我并不是要所有的表格,都这样奇偶换行变色啊??怎么办?那么,看jquery代码如下:
<script language="javascript"> $(function(){ $(".tab tr:even").addClass("even"); $(".tab tr:odd").addClass("odd"); }); </script>
.tab为一个class,就是给你的需要定义行换色的表格加个class为tab的样式,这个样式什么都不用设置。此处只是为了jquery识别调用。
.tab tr 两者间的空格,表示,表格样式为tab的下面所有的tr。它是jquery的选择器的一个用法, 跟css选择符很像,不是吗?