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

2019/6/29 22:31:18

编程Tag： jQuery 表格单元格拖动调整

本文主要是介绍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>

这篇关于jQuery实现拖动调整表格单元格大小的代码实例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章