本文介绍了一个用于网页表格的jQuery插件，该插件能够实现奇偶行不同样式、鼠标悬停变色及点击标记等功能。通过简单的配置选项，可以轻松定制表格的视觉效果和交互体验。
效果描述：让表格奇偶显示不一样，鼠标移动上去变化颜色，同时点击以后记录一种颜色
(function($) { $.fn.Test = function(options) { var defaults = { CRowClass: "clickRow", evenRowClasss: "evenRow", oddRowClasss: "oddRow", activeRowClass: "activeRow" } var oldObj; var options = $.extend(defaults, options); this.each(function() { var thisTable = $(this); $(thisTable).find("tr:even").addClass(options.evenRowClasss); $(thisTable).find("tr:odd").addClass(options.oddRowClasss); $(thisTable).find("tr").bind("mouseover", function() { $(this).addClass(options.activeRowClass); }); $(thisTable).find("tr").bind("click", function() { $(oldObj).removeClass(options.CRowClass); $(this).addClass(options.CRowClass); oldObj = $(this); }); $(thisTable).find("tr").bind("mouseout", function() { $(this).removeClass(options.activeRowClass); }); }); } })(jQuery); $(document).ready(function() { $(".style1").Test({ evenRowClasss: "Test1", oddRowClasss: "Test2", activeRowClass: "Test3", CRowClass: "Test4" }); });
使用方法（把插件直接写在页面了)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></mce:script> <mce:script type="text/javascript"><!-- (function($) { $.fn.Test = function(options) { var defaults = { CRowClass: "clickRow", evenRowClasss: "evenRow", oddRowClasss: "oddRow", activeRowClass: "activeRow" } var oldObj; var options = $.extend(defaults, options); this.each(function() { var thisTable = $(this); $(thisTable).find("tr:even").addClass(options.evenRowClasss); $(thisTable).find("tr:odd").addClass(options.oddRowClasss); $(thisTable).find("tr").bind("mouseover", function() { $(this).addClass(options.activeRowClass); }); $(thisTable).find("tr").bind("click", function() { $(oldObj).removeClass(options.CRowClass); $(this).addClass(options.CRowClass); oldObj = $(this); }); $(thisTable).find("tr").bind("mouseout", function() { $(this).removeClass(options.activeRowClass); }); }); } })(jQuery); $(document).ready(function() { $(".style1").Test({ evenRowClasss: "Test1", oddRowClasss: "Test2", activeRowClass: "Test3", CRowClass: "Test4" }); }); // --></mce:script> <mce:style type="text/css"><!-- .style1 { width: 100%; } .clickRow { background-color: #EFEFEF; } .oddRow { background-color: #CECECE; } .activeRow { background-color: #0000EE; } .Test1 { background-color: White; } .Test2 { background-color: Gray; } .Test3 { background-color: Yellow; } .Test4{ background-color:Navy;} --></mce:style><style type="text/css" mce_bogus="1"> .style1 { width: 100%; } .clickRow { background-color: #EFEFEF; } .oddRow { background-color: #CECECE; } .activeRow { background-color: #0000EE; } .Test1 { background-color: White; } .Test2 { background-color: Gray; } .Test3 { background-color: Yellow; } .Test4{ background-color:Navy;} </style> </head> <body> <table class="style1"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
