基础——使用jquery制作隔行换色
CSS
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <style type="text/css">
2 .over{
3 background-color:#F00;
4 }
5 table{
6 background-color:#CCC;
7 }
8 td{
9 border-bottom-width:1px;
10 border-bottom-color:#FC6;
11 border-bottom-style:dotted;
12 width:300px;
13 }
14 </style>
JS
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script type="text/javascript">
2 $(document).ready(function(){ //当文档加载完成时执行
3 $("#tb_Info tr").mouseover(function(){ //当鼠标移动到表格的tr上时执行函数
4 $(this).addClass("over"); //为该tr添加CSS样式over
5 }).mouseout(function(){ //当鼠标移除该tr时执行函数
6 $(this).removeClass("over"); //将该tr上的css移除
7 })
8 });
9 </script>
HTML
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <table id="tb_Info">
2 <tr>
3 <td>1</td>
4 <td>1</td>
5 </tr>
6 <tr>
7 <td>2</td>
8 <td>2</td>
9 </tr>
10 <tr>
11 <td>3</td>
12 <td>3</td>
13 </tr>
14 <tr>
15 <td>4</td>
16 <td>4</td>
17 </tr>
18 <tr>
19 <td>5</td>
20 <td>5</td>
21 </tr>
22 </table>
O(∩_∩)O每天进步一点点O(∩_∩)O
该BLOG供个人记录学习笔记,如有错误欢迎指出!