使表格的标题列可左右拉伸jquery插件封装
插件名称命名为:jquery.tableresize.js，代码如下：
/*
Writen by mlcactus, 2014-11-24
这是我封装的一个jquery插件，能够使table的各列可以左右拉伸，从而使宽度变小或变大
用法：
单个table：$("#table_id").tableresize();
页面所有table：$("table").tableresize();
*/
(function ($) {
$.fn.tableresize = function () {
var _document = $("body");
$(this).each(function () {
if (!$.tableresize) {
$.tableresize = {};
}
var _table = $(this);
//设定ID
var id = _table.attr("id") || "tableresize_" + (Math.random() * 100000).toFixed(0).toString();
var tr = _table.find("tr").first(), ths = tr.children(), _firstth = ths.first();
//设定临时变量存放对象
var cobjs = $.tableresize[id] = {};
cobjs._currentObj = null, cobjs._currentLeft = null;
ths.mousemove(function (e) {
var _this = $(this);
var left = _this.offset().left, top = _this.offset().top, width = _this.width(), height = _this.height(), right = left + width, bottom = top + height, clientX = e.clientX, clientY = e.clientY;
var leftside = !_firstth.is(_this) && Math.abs(left - clientX) <= 5, rightside = Math.abs(right - clientX) <= 5;
if (cobjs._currentLeft || clientY > top && clientY < bottom && (leftside || rightside)) {
_document.css("cursor", "e-resize");
if (!cobjs._currentLeft) {
if (leftside) {
cobjs._currentObj = _this.prev();
}
else {
cobjs._currentObj = _this;
}
}
}
else {
cobjs._currentObj = null;
}
});
ths.mouseout(function (e) {
if (!cobjs._currentLeft) {
cobjs._currentObj = null;
_document.css("cursor", "auto");
}
});
_document.mousedown(function (e) {
if (cobjs._currentObj) {
cobjs._currentLeft = e.clientX;
}
else {
cobjs._currentLeft = null;
}
});
_document.mouseup(function (e) {
if (cobjs._currentLeft) {
cobjs._currentObj.width(cobjs._currentObj.width() + (e.clientX - cobjs._currentLeft));
}
cobjs._currentObj = null;
cobjs._currentLeft = null;
_document.css("cursor", "auto");
});
});
};
})(jQuery);
页面代码为：
<!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 runat="server">
<title></title>
<style type="text/css" >
td{ text-align:center;}
</style>
<script type="text/javascript" src="script/jquery-1.10.2.js"></script>
<script type="text/javascript" src="script/jquery.tableresize.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//使两张table同时支持左右拉伸
$("table").tableresize();
});
</script>
</head>
<body>
表格1<br/>
<table cellspacing="0" border="1" style="border-collapse:collapse;" rules="all">
<tbody><tr>
<td style="width:200px;">ID</td><td style="width:200px;">名字</td><td style="width:200px;">年纪</td><td style="width:200px;">地址</td><td style="width:200px;">电话</td>
</tr><tr>
<td>22</td><td>Name:44</td><td>Age:23</td><td>Address:47</td><td>Phone:15</td>
</tr><tr>
<td>28</td><td>Name:42</td><td>Age:68</td><td>Address:30</td><td>Phone:50</td>
</tr><tr>
<td>29</td><td>Name:63</td><td>Age:48</td><td>Address:90</td><td>Phone:76</td>
</tr>
</tbody>
</table>
<br/>表格2<br/>
<table cellspacing="0" border="1" style="border-collapse:collapse;" rules="all">
<tbody><tr>
<td style="width:200px;">ID</td><td style="width:200px;">名字</td><td style="width:200px;">年纪</td><td style="width:200px;">地址</td><td style="width:200px;">电话</td>
</tr><tr>
<td>22</td><td>Name:44</td><td>Age:23</td><td>Address:47</td><td>Phone:15</td>
</tr><tr>
<td>28</td><td>Name:42</td><td>Age:68</td><td>Address:30</td><td>Phone:50</td>
</tr>
</tbody></table>
</body>
</html>
相关推荐
-
jQuery中:header选择器用法实例
本文实例讲述了jQuery中header选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配标题元素,即(h1-h6). 语法结构: 复制代码 代码如下: $(":header") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等.例如: 复制代码 代码如下: $(".qiantai:header").css("color","blue") 以上代码能够将类名为qiantai的标题元素中的字体颜
-
Jquery创建层显示标题和内容且随鼠标移动而移动
复制代码 代码如下: <script src="Core/Public/js/jquery.js" type="text/javascript"></script> //引入Jquery <style type="text/css"> //编写创建的div的样式 #tooltip { position: absolute; border: 1px #solid #333; background: #f7f5d1
-
让新消息在网页标题闪烁提示的jQuery代码
可能有一些站长会注意到这样的效果,就是我们在一些SNS社交.社区论坛浏览时,经常会看到收到的新消息会闪烁标题提示,那么这样的效果我们能不能运用在自己的网站呢,新消息在网页标题闪烁显示的效果如何实现?小编有幸在某牛人技术博客看到这样的代码,基于jquery框架. 为解决一些网页特效运行后不能显示效果(例如:jQuery则需要刷新)问题,我们特别新增网页版演示. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition
-
jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)
表格大家都十分熟悉,如今的CSS也使得表格的布局越来越光彩耀人.但是,无论如何,都掩饰不了那些包装下的死板. 那么如何让那些死板的数据 更具有可读性.可用性,能够让我们那些数据在"动"呢? 下面我们使用jquery+ajax 来为表格注入些活力.主要实现的目的就是:将表格的列标题转化为按钮,点击不同的列标题,便按相应的列对数据进行排序.比如学生信息表,我点击"生日"列,这张表便按生日排序将结果呈现在我们面前.使用ajax来调用本页也避免了刷新页面所带来的折磨. 下面
-
jQuery实现点击标题输入详细信息
复制代码 代码如下: <!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></title
-
Jquery 设置标题的自动翻转
即一条新闻滚进视图之后,会暂停几秒钟,然后继续向上2滚动,淡出视图,同时,下一条新闻接着滚入视图.这次主要是用jquery来开发这个功能,里面肯定有许多不足之处,欢迎大家点评. 先粘贴一下代码, 复制代码 代码如下: <style> <%-- #news-feed { padding: 0; margin: 0 0 0 10px; position: relative; height: 200px; width: 17em; overflow: hidden; } .headline {
-
Jquery修改页面标题title其它JS失效的解决方法
Jquery代码 复制代码 代码如下: $("title").html("hello"); 后来只好用下面这段js代码来实现 Js代码 复制代码 代码如下: document.title="hello";
-
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
本文实例讲述了jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的弹出层,点击文字后从网页右上角飞入,也可以说是滑入,此类弹出框带有关闭按钮,可自定义标题栏和弹出框内容,风格自己可定义,代码简洁,基于jquery实现,学习参考价值大,也可拿出即用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-title-info-stye-alert-code
-
jQuery实现获取h1-h6标题元素值的方法
本文实例讲述了jQuery实现获取h1-h6标题元素值的方法.分享给大家供大家参考,具体如下: 1.问题背景: 查找到h1-h6,并遍历它们,打印出内容 2.实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>查找标题</title> <script type="text/javascript" src=&
-
基于jquery插件制作左右按钮与标题文字图片切换效果
本例用了2个js文件jquery-ui-1.8.6.core.widget.js和jqueryui.bannerize.js,到演示页面可以查看 CSS Code 复制代码 代码如下: <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} /* ui-banner */ .ui-banner{display:block;position:relative;wi
-
jQuery 标题的自动翻转实现代码
即一条新闻滚 进视图之后,会暂停几秒钟,然后继续向上2滚动,淡出视图,同时,下一条新闻接着滚入视图.这次主要是用jquery来开发这个功能,里面肯定有许多不足 之处,欢迎大家点评. 先粘贴一下代码, 复制代码 代码如下: <style> <%-- #news-feed { padding: 0; margin: 0 0 0 10px; position: relative; height: 200px; width: 17em; overflow: hidden; } .headline