自定义基于 jQuery 的 tableUI 插件(基偶行颜色交替，活动行变色)

来源：互联网发布：javascript文献书籍编辑：程序博客网时间：2024/05/16 01:43

jquery-tableUI-1.0.js

<span style="font-size:14px;">;/* * tableUI 0.1 * Copyright (c) 2014 DavidWood http://blog.csdn.net/xueshandugu/article/details/36892325* Date: 2014-07-15 * 使用tableUI可以方便地将表格提示使用体验。现在提供的功能有奇偶行颜色交替，鼠标移上高亮显示 */(function($){$.fn.extend({tableUI:function(options){// expand options var opts = $.extend({}, $.fn.tableUI.defaults , options); return this.each(function(){var $thisTable = $(this);// add even&odd row color$thisTable.find("tr:even:gt(0)").addClass(opts.evenRowClass); $thisTable.find("tr:odd").addClass(opts.oddRowClass); // add active row color$thisTable.find("tr:gt(0)").bind("mouseover",function(){ $(this).addClass(opts.activeRowClass); }); $thisTable.find("tr:gt(0)").bind("mouseout",function(){ $(this).removeClass(opts.activeRowClass); }); });},test:function(){return this.each(function(){alert("test!");}); }});// definite defaults    $.fn.tableUI.defaults = {evenRowClass:"tableUI_evenRow", oddRowClass:"tableUI_oddRow",activeRowClass:"tableUI_activeRow"     };})(jQuery); </span>

tableUI.css

<span style="font-size:14px;">.tableUI_th{background-color:#99CC99;}.tableUI_evenRow{background-color:#FFFF99;}.tableUI_oddRow{background-color:#FFCC99;}.tableUI_activeRow{background-color:#FFFF00;}</span>

plug.jsp

<span style="font-size:14px;"><%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%request.setAttribute("path", request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/");%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="${path}">        <title>My JSP 'plug.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><link rel="stylesheet" type="text/css" href="${path}/components/tableUI/css/tableUI.css"><script type="text/javascript" src="${path}/components/tableUI/js/jquery-1.11.1.min.js"></script><script type="text/javascript" src="${path}/components/tableUI/js/jquery-tableUI-1.0.js"></script><script type="text/javascript">$(function(){$("table.tableUI").tableUI({mm:"123"}).width("900px").test();});</script>  </head>    <body>    This is my JSP page. <br><div><table class="tableUI" width="700" border="1" cellspacing="0" cellpadding="0" >    <caption>复旦大学 2014年花名册</caption>    <thead class="tableUI_th">    <tr height="30">    <th>编号</th>    <th>姓名</th>    <th>性别</th>    <th>出生日期</th>    <th>出生地</th>    <th>爱好</th>    <th>荣誉</th>    </tr>    </thead>    <tbody>     <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>     <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>     <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>      <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>     <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>     <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>        <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>     <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>     <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>     <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>     <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>     <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>      <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>     <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>     <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>        <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>     <tr height="30">    <td>1</td>    <td>李梦怡</td>    <td>女</td>    <td>1995-9-12</td>    <td>江南</td>    <td>琴、棋、书、画</td>    <td>江浙第一美女</td>    </tr>    </tbody>    </table></div>  </body></html></span>

插件结构图：

效果图：

0 0