JS-Demo1：JavaScript實現表格列拖動

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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 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" onmousedown="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" 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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More