(function ($) { $.fn.resizetable = function () { var tableObj = $(this); var inResizeRange = false; //鼠标移到可调整范围内为true var inResizeRangeLClicked = false; //鼠标在可调整范围内右键按下为true var inResizing = false; //开始调整大小时为true(鼠标在可调整范围内，并按下右键) var resizeDiv; //用来显示当前位置的div var nowThObj; //当前正在调整的th var dragDirection; //0 left, 1 right //如果可调整大小，需要将talbe宽度设置为固定数字，这样在调整大小后，整个表格的大小也需要调整 var ths = tableObj.find("th"); for (var i = 0; i < ths.length; i++) { $(ths[i]).width($(ths[i]).width()); } tableObj.css("width", tableObj.width()); tableObj.find("th").mousemove(function (e) { //鼠标在TH移动时，如果在边界范围则将鼠标改成可移动图标（边界范围是在边界的左右2px内） var pos = $(this).position(); var width = $(this).width(); if (!inResizeRange) { if (pos.left + width - 2 <= e.clientX) { $(this).css("cursor", "col-resize"); inResizeRange = true; nowThObj = this; dragDirection = 1; } if (e.clientX - 2 <= pos.left + 2) { if (this.cellIndex == 0) return; $(this).css("cursor", "col-resize"); inResizeRange = true; nowThObj = this; dragDirection = 0; } } if (!inResizing) { if (!(pos.left + width - 2 <= e.clientX || e.clientX - 2 <= pos.left + 2)) { $(this).css("cursor", ""); inResizeRange = false; } } }).mousedown(function (e) { //在可迁移范围内按下鼠标右键，创建可移动的div if (e.button <= 1 && inResizeRange) { inResizeRangeLClicked = true; var pos = $(this).position(); createDragDiv(e.clientX, pos.top); } }); $("body").mousemove(function (e) { //移动鼠标，显示当前位置 if (inResizeRange && inResizeRangeLClicked) { $(this).css("cursor", "col-resize"); resizeDiv.css("left", e.clientX); } }).mouseup(function (e) { //鼠标右键弹起，调整TH宽度，并释放资源 if (e.button <= 1 && inResizeRange) { adjustWidth(e); inResizeRangeLClicked = false; destroy(); } }); //创建显示调整位置的DIV function createDragDiv(posLeft, posTop) { resizeDiv = $("<div style='position:absolute; 2px; height:50px; background-color:gray;'></div>"); resizeDiv.appendTo("body").css({ "left": posLeft, "top": posTop }); inResizing = true; } //重置各标识变量，释放div function destroy() { inResizeRange = false; inResizeRangeLClicked = false; $("body").css("cursor", ""); resizeDiv.remove(); inResizing = false; } //调整TH大小 function adjustWidth(e) { var resizeWidth = 0; if (dragDirection == 0) { //left resizeWidth = e.clientX - $(nowThObj).position().left; $(nowThObj).prev("th").width($(nowThObj).prev("th").width() + resizeWidth); } else { //right resizeWidth = e.clientX - ($(nowThObj).position().left + $(nowThObj).width()); $(nowThObj).width($(nowThObj).width() + resizeWidth); } tableObj.width(tableObj.width() + resizeWidth); } }; })(jQuery)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="jquery-1.9.1.min.js"></script> <script src="jquery.resizetable.js"></script> <script type="text/javascript"> $(function () { $("#tableTest").resizetable(); }); </script> <style type="text/css"> table th,td { border: 1px solid black; } body { -moz-user-select: none; -webkit-user-select: none; user-select: none; } </style> </head> <body> <table id="tableTest" cellpadding="0" cellspacing="0" style="border-collapse:collapse; 100%;"> <tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> </table> </body> </html>