[轉帖]table任意拖拽改變寬高示例代碼
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
 ：table任意拖拽改變寬高示例代碼
table任意拖拽改變寬高示例代碼 html結構： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>table</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style> table th{ cursor:col-resize; background:rgb(204,215,255); } </style> </head> <body> <table id="tb1" cellspacing="0" cellpadding="2" width="100%" border="1"> <tbody> <tr> <th>編號</th><th>名稱</th><th>英文名</th><th>上線時間</th><th>主要功能</th> <th>備注</th><th>網(wǎng)址</th><th>大小</th> </tr> <tr> <td>01</td><td>樂之者java</td><td>lzzjava</td><td>2017-08-06</td> <td>java相關的原創(chuàng)視頻與文章</td> <td>網(wǎng)站</td><td>http://www.roadjava.com/</td><td>-</td> </tr> <tr> <td>02</td><td>樂之者內容管理系統(tǒng)</td><td>lzzcms</td><td>2017-08-06</td><td>cms類軟件</td> <td>軟件</td><td>-</td><td>幾十兆吧</td> </tr> <tr> <td>01</td><td>樂之者java</td><td>lzzjava</td><td>2017-08-06</td> <td>java相關的原創(chuàng)視頻與文章</td> <td>網(wǎng)站</td><td>http://www.roadjava.com/</td><td>-</td> </tr> <tr> <td>02</td><td>樂之者內容管理系統(tǒng)</td><td>lzzcms</td><td>2017-08-06</td><td>cms類軟件</td> <td>軟件</td><td>-</td><td>幾十兆吧</td> </tr> </tbody> </table> </body>
<script> //js實現(xiàn)改變寬度 var resizeTd; var table = document.getElementById("tb1"); for (j = 0; j < table.rows[0].cells.length; j++) { table.rows[0].cells[j].onmousedown = function (e) { if (this.offsetWidth-e.offsetX< 10) { resizeTd = this;//保存下要操作的列 resizeTd.initClientX = e.clientX;//保存下鼠標按下時鼠標相對該單元格x方向的偏移 resizeTd.initWidth = resizeTd.offsetWidth;//保存下該單元格的寬度 } }; table.rows[0].cells[j].onmousemove = function () {//更改鼠標樣式 if (this.offsetWidth-event.offsetX<10){ this.style.cursor = 'col-resize'; }else{ this.style.cursor = 'default'; } }; } document.onmouseup = function () {//不需要寫在上邊的for循環(huán)里面 resizeTd = null; }; document.onmousemove = function (evt) { if(resizeTd){ if(resizeTd.initWidth+(evt.clientX-resizeTd.initClientX)>0){ resizeTd.width=resizeTd.initWidth+(evt.clientX-resizeTd.initClientX); } } };
//jquery實現(xiàn)改變高度 var resizeTr; $("tr").mousedown(function(e){//鼠標按下時初始化當前要操作的行 if($(this).outerHeight()-e.offsetY<10){ resizeTr=this; resizeTr.initClientY=e.clientY; resizeTr.initHeight=$(this).outerHeight(); } }); $(document).mouseup(function(){//鼠標抬起時置空當前操作的行 resizeTr=null; }); $("tr").mousemove(function(evt){ //鼠標在接近行底部時改變形狀 if($(this).outerHeight()-evt.offsetY<10){ $(this).css("cursor","row-resize"); }else{ $(this).css("cursor","default"); } }); //如果鼠標移動事件綁定在tr上，當移動過快時會導致tr的高度變化跟不上鼠標的移動變化 $(document).mousemove(function(evt){ if(resizeTr){ if(resizeTr.initHeight+(evt.clientY-resizeTr.initClientY)>0){ $(resizeTr).outerHeight(resizeTr.initHeight+(evt.clientY-resizeTr.initClientY)); } } }); </script> </html> 該文章在 2023/5/20 16:02:57 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
