#学习笔记#(5)表格奇偶行颜色样式JavaScript+CSS+HTML

来源：互联网发布：地下刷火车票软件编辑：程序博客网时间：2024/05/17 07:15

<html><head><title>表格奇偶行样式</title><!--导入jQuery库--><script type="text/javascript" src="jquery-1.11.3.min.js""></script><style type="text/css"> .odd{background:#ffffee;<!--奇数行样式-->} .even{background:#fff38f;<!--偶数行样式-->} .first{background:red;<!--首行样式-->} .last{background:blue;<!--末行样式-->} .mouseOver{background:green;<!--鼠标经过时样式-->} </style></head><body><!--表格内容--><table><tr><td>姓名</td><td>年龄</td><td>职业</td></tr><tr><td>张三</td><td>25</td><td>前端工程师</td></tr><tr><td>李四</td><td>26</td><td>前端工程师</td></tr><tr><td>王五</td><td>27</td><td>前端工程师</td></tr><tr><td>赵六</td><td>28</td><td>前端工程师</td></tr></table><!----><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> </body></html>

0 0