javascript
JS-Demo1：JavaScript实现表格列拖动
JS表格列可拖動特效：
<!DOCTYPE html> <html> <head> <style type="text/css"> table{ border-top:solid 1px black; border-left:solid 1px black; font-size:12px; width: 100%; } th{ white-space: nowrap; } th,td{ border-right-style: solid; border-right-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; height:30px; } .dragable{ width: 3px; height:100%; background-color: white; float: right; /*這個樣式與效果有一定關系,其他無所謂*/ cursor: col-resize; } </style> <script type="text/javascript"> var draging = false;//是否拖拽中 var dragElement = null;//當前拖拽的th var offsetLeft = 0;//當前拖拽的th與絕對左坐標 var offsetWidth = 0;//當前拖拽的th的絕對寬度 function mousedown(){ if(draging) return; draging = true; dragElement = window.event.srcElement.parentNode; offsetLeft = dragElement.offsetLeft; document.body.style.cursor = "col-resize"; document.body.onselectstart = function(){return false;};//拖拽的時候，鼠標滑過字的時候，不讓選中(默認鼠標選中字的效果,大家都知道) } function mouseup(){ draging = false; dragElement = null; document.body.style.cursor = "auto"; document.body.onselectstart = function(){return true}; } function mousemove(){ if(draging && dragElement){ var width = event.clientX-offsetLeft; if(width>0){ dragElement.style.width = width; offsetWidth = dragElement.offsetWidth; }else{ dragElement.style.width = offsetWidth; } } } </script> </head> <body οnmοusemοve="mousemove();" οnmοuseup="mouseup();"> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th style="width: 120px;">編號<span class="dragable" οnmοusedοwn="mousedown();"> </span></th> <th style="width: 120px;">姓名<span class="dragable" οnmοusedοwn="mousedown();"> </span></th> <th style="width: 120px;">年齡<span class="dragable" οnmοusedοwn="mousedown();"> </span></th> <th>備注</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Siuon</td> <td>100</td> <td>JavaEE工程師...</td> </tr> </tbody> </table> </body> </html>動態生成<span class="dragable" οnmοusedοwn="mousedown();"> </span>
<!DOCTYPE html> <html> <head> <style type="text/css"> table{ border-top:solid 1px black; border-left:solid 1px black; font-size:12px; width: 100%; } th{ white-space: nowrap; } th,td{ border-right-style: solid; border-right-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; height:30px; } .dragable{ width: 3px; height:100%; background-color: white; float: right; /*這個樣式與效果有一定關系,其他無所謂*/ cursor: col-resize; } </style> <script type="text/javascript"> var draging = false;//是否拖拽中 var dragElement = null;//當前拖拽的th var offsetLeft = 0;//當前拖拽的th與絕對左坐標 var offsetWidth = 0;//當前拖拽的th的絕對寬度 function mousedown(){ if(draging) return; draging = true; dragElement = window.event.srcElement.parentNode; offsetLeft = dragElement.offsetLeft; document.body.style.cursor = "col-resize"; document.body.onselectstart = function(){return false;};//拖拽的時候，鼠標滑過字的時候，不讓選中(默認鼠標選中字的效果,大家都知道) } function mouseup(){ draging = false; dragElement = null; document.body.style.cursor = "auto"; document.body.onselectstart = function(){return true}; } function mousemove(){ if(draging && dragElement){ var width = event.clientX-offsetLeft; if(width>0){ dragElement.style.width = width; offsetWidth = dragElement.offsetWidth; }else{ dragElement.style.width = offsetWidth; } } } //創建<span class="dragable" οnmοusedοwn="mousedown();">?</span> function createSpan(){ var span = document.createElement("span"); span.className = "dragable"; span.attachEvent("onmousedown",mousedown); span.innerHTML = "?"; return span; } function init(){ //在th添加span var ths = document.getElementsByTagName("th"); for(var i=0;i<ths.length;i++){ ths[i].appendChild(createSpan()); } } </script> </head> <body οnlοad="init()" οnmοusemοve="mousemove();" οnmοuseup="mouseup();"> <table id="mytable" cellpadding="0" cellspacing="0"> <thead> <tr> <th style="width: 120px;">編號</th> <th style="width: 120px;">姓名</th> <th style="width: 120px;">年齡</th> <th>備注</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Siuon</td> <td>100</td> <td>JavaEE工程師...</td> </tr> </tbody> </table> </body> </html>
轉載于:https://www.cnblogs.com/springside6/archive/2012/05/29/2525102.html
總結
以上是生活随笔為你收集整理的JS-Demo1：JavaScript实现表格列拖动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 楼天成夺Facebook黑客杯季军，已被
- 下一篇： (转)Facebook如何提高软件质量？