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

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>

赞 (0)

相关推荐

  • jquery miniui 教程 表格控件 合并单元格应用

    jquery miniui 教程 表格控件 合并单元格应用

    表格:合并单元格 参考示例:合并单元格 调用方法:margeCells.如下代码: 复制代码 代码如下: grid.on("load", onLoad); function onLoad(e) { var grid = e.sender; var marges = [ { rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 }, { rowIndex: 3, columnIndex: 0, rowSpan: 4, colSpan: 3

  • jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】

    jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】

    本文实例讲述了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/

  • jQuery实现HTML表格单元格的合并功能

    jQuery实现HTML表格单元格的合并功能

    本文实例讲述了jQuery实现HTML表格单元格合并的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 合并前: 合并后: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.

  • JQuery实现表格中相同单元格合并示例代码

    代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>merge.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this

  • 基于jQuery的合并表格中相同文本的相邻单元格的代码

    ONE 已经生成的数据表格大致内容如下: 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 广东 深圳 00028 红花油               广东 深圳 00028 红花油               广东 深圳 00028 红花油               广东 广州 00027 白花油               广东 广州 00028 红花油               广东 深圳 00028 红花油               广东

  • jquery合并表格中相同文本的相邻单元格

    jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta charset="utf-8"/> <style></style> <script src="js/jquery-2.1.4.min.js"></script> </head> <body>

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

    jQuery实现的拖动调整表格td单元格的大小: 在实际应用中,可能有这样的需求,那就是需要调整td单元格的大小. 也许是为了便于观察,也许是其他原因,反正这样的需求是有的,下面就分享一段能够实现此功能的代码. 代码实例如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>我们</title> <style ty

  • jQuery实现鼠标可拖动调整表格列宽度

    jQuery实现鼠标可拖动调整表格列宽度

    实现鼠标可拖动调整表格列宽度 如图:  一.引入文件: 复制代码 代码如下: <script src="/js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="/js/store.js" type="text/javascript"></script> <script src="

  • jQuery实现合并表格单元格中相同行操作示例

    jQuery实现合并表格单元格中相同行操作示例

    本文实例讲述了jQuery实现合并表格单元格中相同行操作.分享给大家供大家参考,具体如下: 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列 }) /** * 操作表格 合并单元格 行 * 2016年12月13日16:00:41 */ (function($) { // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件 // 才保留了jQuery.prototype这个形式 $.f

  • 基于JQuery实现相同内容合并单元格的代码

    基于JQuery实现相同内容合并单元格的代码

    web前端开发的时候经常会遇到要做表单的页面或者做一些表格的效果如相同内容要同一个单元格里面显示,一般的方法是table里面在套table但是这种方法会增加页面的负担影响页面加载速度但是如果用DIV有不好控制写的css样式要很多,那怎么办呢?我们就中和下利用JQuery来和他一个table里面相同内容的单元格,这里代码跟大家分享下,希望对大家有用,如下: 头部JQuery代码 复制代码 代码如下: <script type="text/javascript"> jQuery

  • 表格单元格交错着色实现思路及代码

    表格单元格交错着色实现思路及代码

    [Title][原]表格单元格交错着色 [Abstract]以空间换时间,循环确定所着颜色. [Environment]jQuery [Author]wintys (wintys@gmail.com) http://wintys.cnblogs.com [Content]: 1.效果  2.问题描述 对如下表格中的单元格进行交错着色.表格中HTML标签.内容已定. 复制代码 代码如下: <div id="tablecontainer" align="center&quo

  • jQuery实现的调整表格行tr上下顺序

    表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>我们<

  • jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法

    本文实例讲述了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法.分享给大家供大家参考,具体如下: JS鼠标双击事件 onDblClick <td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %> </td> 这里的本人用绑定的值是传的当前行对应的ID号 function ShowEle

  • JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格内容 <!DOCTYPE html> <html> <head> <script> function changeContent() { var x=document.getElementById('myTable').rows[0].cells; x[0].i

随机推荐