jQuery實(shí)現(xiàn)拖動(dòng)調(diào)整表格單元格大小的代碼實(shí)例

更新時(shí)間：2015年01月13日 10:08:20 投稿：junjie

這篇文章主要介紹了jQuery實(shí)現(xiàn)拖動(dòng)調(diào)整表格單元格大小的代碼實(shí)例,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下

jQuery實(shí)現(xiàn)的拖動(dòng)調(diào)整表格td單元格的大小:

在實(shí)際應(yīng)用中，可能有這樣的需求，那就是需要調(diào)整td單元格的大小。
也許是為了便于觀察，也許是其他原因，反正這樣的需求是有的，下面就分享一段能夠?qū)崿F(xiàn)此功能的代碼。

代碼實(shí)例如下:

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

      //設(shè)定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();

      //設(shè)定臨時(shí)變量存放對(duì)象

      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;">年紀(jì)</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>