JS-Demo1：JavaScript实现表格列拖动

最新推荐文章于 2017-10-24 15:21:00 发布

HadesCool

最新推荐文章于 2017-10-24 15:21:00 发布

阅读量910

点赞数

JS表格列可拖动特效：

[html]view plaincopy 
   
 <!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 onmousemove="mousemove();" onmouseup="mouseup();">  
     <table cellpadding="0" cellspacing="0">  
         <thead>  
             <tr>  
                 <th style="width: 120px;">编号<span class="dragable" onmousedown="mousedown();">&nbsp;</span></th>  
                 <th style="width: 120px;">姓名<span class="dragable" onmousedown="mousedown();">&nbsp;</span></th>  
                 <th style="width: 120px;">年龄<span class="dragable" onmousedown="mousedown();">&nbsp;</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>

[html]view plaincopy 
   
 <!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" onmousedown="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 onload="init()" onmousemove="mousemove();" onmouseup="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>  