JS表格奇偶行插件
表格奇偶行变色
1、JQUERY-TableUi插件
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable=$(this);
//添加奇偶行颜色
$(thisTable).find("tr:even").addClass(options.evenRowClass);
$(thisTable).find("tr:odd").addClass(options.oddRowClass);
//添加活动行颜色
$(thisTable).find("tr").bind("mouseover",function(){
$(this).addClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("mouseout",function(){
$(this).removeClass(options.activeRowClass);
});
});
};
})(jQuery);
2、奇偶行的CSS
.evenRow{background: #F7F7F7;}
.oddRow {background: red;}
.activeRow{background: blue;}
3、调用此插件的方法
代码
2 <head>
3 <title>无标题页</title>
4 <link href="css/TestTable.css" rel="stylesheet" type="text/css" />
5 <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
6 <script language="javascript" type="text/javascript" src="js/Jquery-TableUI.js"></script>
7 <script language="javascript" type="text/javascript">
8 $(document).ready(function(){
9 $("#t").tableUI();
10 })
11 </script>
12 </head>
13 <body>
14 <table id ="t" width="400" border="1">
15 <tr>
16 <td>1</td>
17 <td> </td>
18 <td> </td>
19 </tr>
20 <tr>
21 <td>2</td>
22 <td> </td>
23 <td> </td>
24 </tr>
25 <tr>
26 <td>3</td>
27 <td> </td>
28 <td> </td>
29 </tr>
30 <tr>
31 <td>4</td>
32 <td> </td>
33 <td> </td>
34 </tr>
35 <tr>
36 <td>5</td>
37 <td> </td>
38 <td> </td>
39 </tr>
40 <tr>
41 <td>6</td>
42 <td> </td>
43 <td> </td>
44 </tr>
45 </table>
46 </body>
47 </html>
48
浙公网安备 33010602011771号