jQuery实现拖动调整表格单元格大小的代码实例


Posted in Javascript onJanuary 13, 2015

jQuery实现的拖动调整表格td单元格的大小:

在实际应用中,可能有这样的需求,那就是需要调整td单元格的大小。
也许是为了便于观察,也许是其他原因,反正这样的需求是有的,下面就分享一段能够实现此功能的代码。

代码实例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<title>三水点靠木</title>

<style type="text/css" >

table {

  border-collapse: collapse;

}

td {

  text-align: center;

}

</style>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script type="text/javascript">

(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); 

   

$(document).ready(function () {

  $("table").tableresize();

});

</script>

</head>

<body>

<table cellspacing="0" border="1" 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>

</body>

</html>
Javascript 相关文章推荐
jQuery 联动日历实现代码
May 31 Javascript
js中switch case循环实例代码
Dec 30 Javascript
jquery form 加载数据示例
Apr 21 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
jQuery trigger()方法用法介绍
Jan 13 #Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 #Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 #Javascript
15个jquery常用方法、小技巧分享
Jan 13 #Javascript
js对象基础实例分析
Jan 13 #Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 #Javascript
js使用心得分享
Jan 13 #Javascript
You might like
php图片加中文水印实现代码分享
2012/10/31 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
Python中turtle作图示例
2017/11/15 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
python爬取网易云音乐评论
2018/11/16 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
如何解决python多种版本冲突问题
2020/10/13 Python
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
this关键字的作用
2016/01/30 面试题
生产副总岗位职责
2013/11/28 职场文书
作风建设年度心得体会
2014/10/29 职场文书
中学生思想品德评语
2014/12/31 职场文书
运动会入场词
2015/07/18 职场文书
大学生党课感想
2015/08/11 职场文书
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
Python socket如何解析HTTP请求内容
2022/02/12 Python
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技