jQuery實現的拖曳調整表格td單元格的大小: 在實際應用中，可能有這樣的需求，那就是需要調整td單元格的大小。 也許是為了方便觀察，也許是其他原因，反正這樣的需求是有的，下面就分享一段能夠實現此功能的程式碼。 程式碼實例如下: 複製程式碼 程式碼如下: 腳本之家 <br /> 表{<br /> 邊框折疊：折疊；<br /> }<br /> TD {<br /> 文字對齊：居中；<br /> }<br /> </風格><br /> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"><br /> <腳本類型=“text/javascript”><br /> （函數（$）{<br /> $.fn.tableresize = function () {<br /> var _document = $("body");<br /> $(this).each(function () {<br /> if (!$.tableresize) {<br /> $.tableresize = {};<br /> }<br /> var _table = $(this);<br /> //設定ID<br /> var id = _table.attr("id") || "tableresize_" (Math.random() * 100000).toFixed(0).toString();<br /> var tr = _table.find("tr").first(), ths = tr.children(), _firstth = ths.first();<br /> //設定臨時存放物品<br /> var cobjs = $.tableresize[id] = {};<br /> cobjs._currentObj = null, cobjs._currentLeft = null;<br /> ths.mousemove(函數 (e) {<br /> var _this = $(this);<br /> var left = _this.offset().left, <br /> 上方 = _this.offset().top, <br /> 寬度 = _this.width(), <br /> 高度 = _this.height(), <br /> 右 = 左寬度，<br /> 底部 = 上方高度，<br /> clientX = e.clientX, <br /> clientY = e.clientY;<br /> var leftside = !_firstth.is(_this) && Math.abs(left - clientX) <= 5, <br /> 右側 = Math.abs(右 - clientX) <= 5;<br /> if (cobjs._currentLeft||clientY>上方&&clientY<底部&&(左側||右側)){<br /> _document.css("遊標", "電子調整大小");<br /> if (!cobjs._currentLeft) {<br /> 若（左）{<br /> cobjs._currentObj = _this.prev();<br /> }<br /> 否則{<br /> cobjs._currentObj = _this;<br /> }<br /> }<br /> }<br /> 否則{<br /> cobjs._currentObj = null;<br /> }<br /> });<br /> ths.mouseout(函數 (e) {<br /> if (!cobjs._currentLeft) {<br /> cobjs._currentObj = null;<br /> _document.css("遊標", "自動");<br /> }<br /> });<br /> _document.mousedown(function (e) {<br /> if (cobjs._currentObj) {<br /> cobjs._currentLeft = e.clientX;<br /> }<br /> 否則{<br /> cobjs._currentLeft = null;<br /> }<br /> });<br /> _document.mouseup(函數 (e) {<br /> if (cobjs._currentLeft) {<br /> cobjs._currentObj.width(cobjs._currentObj.width() (e.clientX - cobjs._currentLeft));<br /> }<br /> cobjs._currentObj = null;<br /> cobjs._currentLeft = null;<br /> _document.css("遊標", "自動");<br /> });<br /> });<br /> };<br /> })(jQuery); <br /> <br /> $(文檔).ready(function () {<br /> $("table").tableresize();<br /> });<br /> </腳本><br /> </頭><br /> <身體><br /> <表格單元格間距=“0”邊框=“1”規則=“全部”><br /> <身體><br /> <tr><br /> <td style="width:200px;">ID<br /> <td style="width:200px;">名字<br /> <td style="width:200px;">年輕<br /> <td style="width:200px;">地址<br /> <td style="width:200px;">電話<br /> <br /> <tr><br /> <td>22<br /> <td>姓名：44<br /> <td>年齡：23<br /> <td>地址：47<br /> <td>電話：15<br /> <br /> <tr><br /> <td>28<br /> <td>姓名：42<br /> <td>年齡：68<br /> <td>地址：30<br /> <td>電話：50<br /> <br /> <tr><br /> <td>29<br /> <td>姓名：63<br /> <td>年齡：48<br /> <td>地址：90<br /> <td>電話：76<br /> <br /> <br /> </表><br /> </身體><br /> <br />
