jquery可拖动表格调整列格子的宽度大小本文章来源于代潇瑞博客原文地址：http://www.daixiaorui.com/read/98.html_jquery 很多方块排列在一起改变一个格子的大小任可以排列整齐-CSDN博客

演示地址：http://www.daixiaorui.com/Public/demo/js/drag_tb/

本文章来源于代潇瑞博客原文地址：http://www.daixiaorui.com/read/98.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.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery可拖动表格调整列格子的宽度大小</title>

</head>

<body>

<style type="text/css">

table{border-collapse:collapse;border-spacing:0;}

.listext th{background:#eee;color:#3366cc;}

.listext th,.listext td{border:solid 1px #ddd;text-align:left;padding:10px;font-size:14px;}

.rc-handle-container{position:relative;}

.rc-handle{position:absolute;width:7px;cursor:ew-resize;*cursor:pointer;margin-left:-3px;}

</style>

<table width="100%" class="listext">

<tr>

<th>www</th>

<th>daixiaorui</th>

<th>com</th>

</tr>

<tr>

<td>欢迎</td>

<td>您的</td>

<td>访问</td>

</tr>

<tr>

<td>欢迎</td>

<td>您的</td>

<td>访问</td>

</tr>

</table>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.resizableColumns.js"></script>

<script type="text/javascript">

$(function(){

$("table").resizableColumns({});

});

</script>

</body>

</html>

最后说明一下，本实例没有提供下载，如果要正常运行使用，可以点击上面的“演示地址”进去，然后右键查看源文件，里面有js路径，把路径复制到浏览器下载下来就可以了。如果有任何问题，可以与代潇瑞博客交流。

文章出自：http://www.daixiaorui.com/read/98.html 本站所有文章，除注明出处外皆为原创，转载请注明本文地址，版权所有。

本文章来源于代潇瑞博客原文地址：http://www.daixiaorui.com/read/98.html

JS文件代码如下

var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
  __slice = [].slice;

(function($, window) {
  var ResizableColumns;

  ResizableColumns = (function() {
    ResizableColumns.prototype.defaults = {
      store: window.store,
      rigidSizing: false
    };

    function ResizableColumns($table, options) {
      this.mousedown = __bind(this.mousedown, this);
      var _this = this;

      this.options = $.extend({}, this.defaults, options);
      this.$table = $table;
      this.tableId = this.$table.data('resizable-columns-id');
      this.createHandles();
      this.restoreColumnWidths();
      this.syncHandleWidths();
      $(window).on('resize.rc', (function() {
        return _this.syncHandleWidths();
      }));
    }

    ResizableColumns.prototype.destroy = function() {
      this.$handleContainer.remove();
      this.$table.removeData('resizableColumns');
      return $(window).off('.rc');
    };

    ResizableColumns.prototype.createHandles = function() {
      var _this = this;

      this.$table.before((this.$handleContainer = $("<div class='rc-handle-container' />")));
      this.$table.find('tr th').each(function(i, el) {
        var $handle;

        if (_this.$table.find('tr th').eq(i + 1).length === 0 || (_this.$table.find('tr th').eq(i).attr('data-noresize') != null) || (_this.$table.find('tr th').eq(i + 1).attr('data-noresize') != null)) {
          return;
        }
        $handle = $("<div class='rc-handle' />");
        $handle.data('th', $(el));
        return $handle.appendTo(_this.$handleContainer);
      });
      return this.$handleContainer.on('mousedown', '.rc-handle', this.mousedown);
    };

    ResizableColumns.prototype.syncHandleWidths = function() {
      var _this = this;

      this.$handleContainer.width(this.$table.width());
      return this.$handleContainer.find('.rc-handle').each(function(_, el) {
        return $(el).css({
          left: $(el).data('th').outerWidth() + ($(el).data('th').offset().left - _this.$handleContainer.offset().left),
          height: _this.$table.height()
        });
      });
    };

    ResizableColumns.prototype.saveColumnWidths = function() {
      var _this = this;

      return this.$table.find('tr th').each(function(_, el) {
        var id;

        if ($(el).attr('data-noresize') == null) {
          id = _this.tableId + '-' + $(el).data('resizable-column-id');
          if (_this.options.store != null) {
            return store.set(id, $(el).width());
          }
        }
      });
    };

    ResizableColumns.prototype.restoreColumnWidths = function() {
      var _this = this;

      return this.$table.find('tr th').each(function(_, el) {
        var id, width;

        id = _this.tableId + '-' + $(el).data('resizable-column-id');
        if ((_this.options.store != null) && (width = store.get(id))) {
          return $(el).width(width);
        }
      });
    };

    ResizableColumns.prototype.mousedown = function(e) {
      var $currentGrip, $leftColumn, $rightColumn, idx, leftColumnStartWidth, rightColumnStartWidth,
        _this = this;

      e.preventDefault();
      this.startPosition = e.pageX;
      $currentGrip = $(e.currentTarget);
      $leftColumn = $currentGrip.data('th');
      leftColumnStartWidth = $leftColumn.width();
      idx = this.$table.find('tr th').index($currentGrip.data('th'));
      $rightColumn = this.$table.find('tr th').eq(idx + 1);
      rightColumnStartWidth = $rightColumn.width();
      $(document).on('mousemove.rc', function(e) {
        var difference, newLeftColumnWidth, newRightColumnWidth;

        difference = e.pageX - _this.startPosition;
        newRightColumnWidth = rightColumnStartWidth - difference;
        newLeftColumnWidth = leftColumnStartWidth + difference;
        if (_this.options.rigidSizing && ((parseInt($rightColumn[0].style.width) < $rightColumn.width()) && (newRightColumnWidth < $rightColumn.width())) || ((parseInt($leftColumn[0].style.width) < $leftColumn.width()) && (newLeftColumnWidth < $leftColumn.width()))) {
          return;
        }
        $leftColumn.width(newLeftColumnWidth);
        $rightColumn.width(newRightColumnWidth);
        return _this.syncHandleWidths();
      });
      return $(document).one('mouseup', function() {
        $(document).off('mousemove.rc');
        return _this.saveColumnWidths();
      });
    };

    return ResizableColumns;

  })();
  return $.fn.extend({
    resizableColumns: function() {
      var args, option;

      option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
      return this.each(function() {
        var $table, data;

        $table = $(this);
        data = $table.data('resizableColumns');
        if (!data) {
          $table.data('resizableColumns', (data = new ResizableColumns($table, option)));
        }
        if (typeof option === 'string') {
          return data[option].apply(data, args);
        }
      });
    }
  });
})(window.jQuery, window);