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

最新推荐文章于 2023-03-11 20:07:17 发布
最新推荐文章于 2023-03-11 20:07:17 发布
阅读量1.3k 收藏
点赞数
分类专栏： jqeury 插件开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xueshandugu/article/details/37784693
版权

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>

插件结构图：



效果图：
xueshandugu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ui-table:Table表的UI组件
03-28
React表用户界面 基于 的UI组件 安装 npm i @habx/ui-table 特征 固定头 内置插件的React表 无限滚动 进出口 在我们的测试我们所有的组件 基本用法 const tableInstance = useTable ( { data : FAKE_DATA , columns : BASIC_COLUMNS , } ) return ( < Container> < Table xss=removed> < / Container > ) 进出口 感谢以.xlsx或.csv导入和导出数据 列示例 export const IMEX_COLUMNS = [ { Header : 'Email' , accessor : 'email' ,
table UI 二次封装
最新发布
m0_74331185的博客
04-13 192
为了达到在插槽中使用table表格行数据 需要使用局部作用域插槽，将组件内部数据对外暴漏。table表格中的数据字段使用插槽不止一个，插槽修改为具名插槽。应为项目中模态框的内容不定，需要将模态框进行二次封装。组件中直接使用模态框。版权所有 © 成都蜗。
Unity 连接 MySql 显示表格（Simple TableUI）
熊思雨的博客
03-11 3076
C# 中 DataTable 类位于命名空间 System.Data ，在 Winform、WPF 等开发中，用的非常多，在 Unity 5.6.X 或者更低的版本中，是无法直接使用的，也不要在 Visual Studio 中去引用 System.Data.dll，不然在 Unity 里会报错，错误比如：下面来介绍一下，在 Unity 里低版本中如何使用 DataTable。
Element-UI实现复杂table表格结构
热门推荐
觉醒法师的专栏
03-09 1万+
Element-UI组件el-table用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。这里将使用到以下两项，来完成今天demo演示：1. 多级表头：数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。2. 合并行或列：多行或多列共用一个数据时，可以合并行或列。
jQuery 入门教程(42): jQuery UI Tab 示例（二）
thewebcode
05-07 149
支持收缩和展开缺省情况下，标签页是展开的，可以通过设置collapsible为true使得标签页支持收缩和展开。 1 &lt;script&gt; 2 $(function () { 3 $("#tabs").tabs({ 4 collapsible: true 5 }); 6 }); 7 &lt;/script&gt; Ajax支持...
jQuery 行背景颜色的交替显示(隔行变色)实现代码
10-29
主要是利用了jquery的attr为行添加样式来实现的，具体的代码如下。
基于jQuery实现Accordion手风琴自定义插件
11-26
目前网上有很多各种各样的手风琴插件，但是没有一个完整实现了的侧菜单，今天写了一个可以无限子节点的手风琴侧菜单，有需要的可以参考一下，有什么好的想法可以留言。（没有经过彻底测试，不过问题应该不大） 下面...
jQuery table选中表格行变色
10-25
jQuery table选中表格行变色 jQuery table选中表格行变色 jQuery table选中表格行变色
基于jQuery实现Tabs选项卡自定义插件
11-29
Tabs插件很多人都需要用到，网上也有很多的例子，但是不是风格不搭调就是用着不习惯（自己写的不一定比别人的好但用着顺手In love） 下面直接贴代码，不喜勿喷： (function ($) { 'use strict'; var defaults = {...
jquery uI TABLE
12-28
jquery ui table.zip
element-ui复杂table 表格实现
qq_38377190的博客
11-06 8353
使用element-ui table表格提供的多级表头效果 ===》 只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。表头代码、已经对应实现方法代码。使用element-ui table表格提供的合并行或列 ===》 说明：通过给传入方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行、当前列、当前行号、当前列号四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表，第二个元素代表。 也可以返回一个键名为和的...
JQuery TableUI
Singhania_的专栏
04-05 542
JQuery table 插件 UI
jsu系列之表格组件 ---- jsu.Table
weixin_34008784的博客
12-14 192
作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。废话少说，下面开始进入主题！ 先看效果 上图为固定表头 + 嵌套表格 + 可...
jquery ui 简单的 table
ZXL工作室
12-28 4875
$(document).ready(function(){ //jQuery ready is quicker than onload $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");}); $
jquery ui table
qq_40441894的博客
09-29 1421
[代码] jquery ui sortable 实现table，row的拖动 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
jQuery 表格插件汇总
qjfpjie的专栏
01-06 617
本文搜集了大量 jQuery 表格插件，帮助 Web 设计者更好地驾御 HTML 表格，你可以对表格进行横向和竖向排序，设置固定表头，对表格进行搜索，对大表格进行分页，对表格进行滚动，拖放操作等等。这些插件很多都包含详细的教程。希望能对大家的开发有帮助。 jQuery 表格插件 Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽
15款提高表格操作的jQuery插件
哲
12-21 975
table表格由于它的浏览器兼容性和复杂的标签嵌套方式，可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div，主要就是因为div要比table更容易添加CSS样式。但是我们在日常应用中仍然要用到table表格，其中最好的例子就是对照表。今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示、排序、筛选和操控。如jQuery表格排序插件、jQuer
jquery ui 实现table的sortable功能以及过滤记录功能
yyb_gz的专栏
08-01 6762
<br />本人在工作中曾使用js实现过用鼠标拖动表格的行实现重新排序的功能。当时写了不少的js代码。最近发现jquery ui也能实现这个功能，而且很方便，真后悔当时不知道有这么个好东东。好，现在介绍下如何使用jquery ui来实现。<br /> <br />引入的js文件<br /><script type="text/javascript" src="js/jquery-1.4.2.js"></script><br /> <script type="text/javascript" src="js
jquery表格隔行变色和当前行变色
04-11
根据描述，似乎您是问如何使用jQuery改变表格行的颜色和当前行的颜色。 要改变表格行的颜色，可以选择使用CSS或jQuery。如果选择使用CSS，则可以使用以下代码： ``` tr { background-color: #ddd; } ``` 如果...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值