[转帖]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>网址</th><th>大小</th> </tr> <tr> <td>01</td><td>乐之者java</td><td>lzzjava</td><td>2017-08-06</td> <td>java相关的原创视频与文章</td> <td>网站</td><td>http://www.roadjava.com/</td><td>-</td> </tr> <tr> <td>02</td><td>乐之者内容管理系统</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相关的原创视频与文章</td> <td>网站</td><td>http://www.roadjava.com/</td><td>-</td> </tr> <tr> <td>02</td><td>乐之者内容管理系统</td><td>lzzcms</td><td>2017-08-06</td><td>cms类软件</td> <td>软件</td><td>-</td><td>几十兆吧</td> </tr> </tbody> </table> </body>
<script> //js实现改变宽度 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循环里面 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实现改变高度 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
