表格列拖动及排序

最新推荐文章于 2024-10-30 10:37:47 发布
F-hwak
最新推荐文章于 2024-10-30 10:37:47 发布
阅读量989
点赞数
CC 4.0 BY-SA版权
分类专栏： Js的魅力
本文链接：https://blog.youkuaiyun.com/u012515742/article/details/52847536
Js的魅力专栏收录该内容
1 篇文章
订阅专栏
本文介绍了一个HTML表格实现列拖动及排序的功能。通过JavaScript实现了点击表头进行排序，并支持拖动列来重新排列列的顺序。示例中包含了序列、名称、数量等字段。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>表格列拖动及排序</title>
<style>
      *{
		  margin:0;
		  padding:0;
	  }
	  #chenkbox{
		  margin:100px auto;
		  width:500px;
		  position:relative;
	  }
	  table{
		  width:500px;
		  border-collapse:collapse;
		  boder-spacing:0;
		  table-layout:fixed;
	  }
	  th{
            background: #ebf3f0;
            font-size: 13px;
            color:#000002;
     }
	  th,td{
		 text-align: center;
          border: 1px solid #dcdbdb;
		  padding:2px 6px;
	  }
	#box{position:absolute;display:none;opacity:0.9;background:#fff;text-align: center;top:0;}
</style>
</head>

<body>
<div id="chenkbox">
<table id="tableSort">
      <tr>
      <th onClick="sortTable('tableSort',0)"> 序列</th>
      <th onClick="sortTable('tableSort',1)"> 名称</th>
      <th onClick="sortTable('tableSort',2)"> 数量</th>
      <th onClick="sortTable('tableSort',3)"> 单价（Q点）</th>
      <th onClick="sortTable('tableSort',4)"> 总计（Q点）</th>
     </tr>
     <tr>
                <td>1</td>
                <td>农场话费A</td>
                <td>2</td>
                <td>50</td>
                <td>100</td>
       </tr>
       <tr>
                <td>2</td>
                <td>飞车道具C</td>
                <td>1</td>
                <td>80</td>
                <td>80</td>
       </tr>
       <tr>
                <td>3</td>
                <td>空间K</td>
                <td>1</td>
                <td>120</td>
                <td>120</td>
       </tr>
       <tr>
                <td>4</td>
                <td>农场狗粮C</td>
                <td>4</td>
                <td>60</td>
                <td>240</td>
       </tr>
       <tr>
                <td>5</td>
                <td>音速种子</td>
                <td>2</td>
                <td>110</td>
                <td>220</td>
       </tr>
       <tr>
                <td>6</td>
                <td>农场化肥D</td>
                <td>5</td>
                <td>60</td>
                <td>300</td>
       </tr>
       <tr>
                <td>7</td>
                <td>AVA装扮C</td>
                <td>1</td>
                <td>300</td>
                <td>300</td>
       </tr>
       <tr>
                <td>8</td>
                <td>三国道具C</td>
                <td>15</td>
                <td>60</td>
                <td>900</td>
       </tr>
       <tr>
                <td>9</td>
                <td>DNF道具B</td>
                <td>4</td>
                <td>300</td>
                <td>1200</td>
       </tr>
       <tr>
                <td>10</td>
                <td>农场化肥H</td>
                <td>6</td>
                <td>80</td>
                <td>120</td>
       </tr>
       <tr>
                <td>11</td>
                <td>农场化肥B</td>
                <td>1</td>
                <td>80</td>
                <td>80</td>
       </tr>
       <tr>
                <td>12</td>
                <td>Q宠元宝</td>
                <td>100</td>
                <td>1</td>
                <td>100</td>
      </tr>
       <tr>
                <td>13</td>
                <td>三国道具K</td>
                <td>9</td>
                <td>20</td>
                <td>180</td>
      </tr>
</table>
<div id="box"> </div>
 </div>
   </div>
      <script>
	  //列排序
	  function sortTable(table,idx){
		  var otable=document.getElementById(table), //获取表格ID
		  otody=otable.tBodies[0], //获取表格的Tbody
		  otr = otody.rows,  //获取tbody所有行的引用
		  tarr=[];     //用于存放行
		  for(var i = 1; i<otr.length;i++){   //从1开始去掉标题
			  tarr[i-1]=otr[i];
		  };
		  if(otody.sortCol==idx){
			  tarr.reverse();
		  }
		  else{
			  tarr.sort(function(tr1,tr2){
				  var value1 = tr1.cells[idx].innerHTML;
				  var value2 = tr2.cells[idx].innerHTML;
				  if(!isNaN(value1)&&!isNaN(value2)){
					  return value1-value2;
				  }
				  else{
					  return value1.localeCompare(value2);
				  }
			  })
		  }
		  var fragment = document.createDocumentFragment(); //创建文档碎片
		  for(i = 0; i<tarr.length; i++){
			  fragment.appendChild(tarr[i]);
		  }
		  otody.appendChild(fragment);
          otody.sortCol=idx;
	  }
	   //列拖动
	   function Drag(table){
    var ochek=document.getElementById("chenkbox"),
        otable=document.getElementById(table),
        otody=otable.tBodies[0],
        oth=otody.getElementsByTagName("th"),
        otd=otody.getElementsByTagName("td"),
        box=document.getElementById("box"),
        arrn=[];
        for (var i = 0; i < otd.length; i++) {
          otd[i].onmousedown=function(e){
              var e=e||window.event,
                  target = e.target||e.srcElement,
									
                  thW = target.offsetWidth,
                  maxl=ochek.offsetWidth-thW,
                  rows=otable.rows,
                  ckL=ochek.offsetLeft,
                  disX=target.offsetLeft,
                  _this=this,
                  cdisX=e.clientX-ckL-disX;
					
                  for (var i = 0; i < rows.length; i++) {
                      var op=document.createElement("p");
                      op.innerHTML=rows[i].cells[this.cellIndex].innerHTML;  
                      box.appendChild(op);
                  };    
                  for (var i = 0; i < oth.length; i++) {
                         arrn.push(oth[i].offsetLeft);      
                  }; 
                  console.log(arrn);
                  box.style.display="block";
                  box.style.width=thW+"px";
                  box.style.left=disX+"px";
                  //未完成 还有事件没写。
                  document.onmousemove=function(e){
                      var e=e||window.event,
                      target = e.target||e.srcElement,
                      thW = target.offsetWidth;
                      box.style.top=0;
                      box.style.left=e.clientX-ckL-cdisX+"px";
                      if(box.offsetLeft>maxl){
                           box.style.left=maxl+"px";
                      }else if(box.offsetLeft<0){
                           box.style.left=0;
                      }        
                      document.onselectstart=function(){return false};     
                    window.getSelection ? window.getSelection().removeAllRanges() : doc.selection.empty();              
                  }
                  document.onmouseup=function(e){
                     var e=e||window.event,
                         opr=box.getElementsByTagName("p"),
                         oboxl=box.offsetLeft+cdisX;
                        for (var i = 0; i < arrn.length; i++) {
                           if(arrn[i]<oboxl){
                            var index=i;
                           }
                        };
                       for (var i = 0; i < rows.length; i++) {
                          rows[i].cells[_this.cellIndex].innerHTML="";
                          rows[i].cells[_this.cellIndex].innerHTML=rows[i].cells[index].innerHTML;
                          rows[i].cells[index].innerHTML="";
                          rows[i].cells[index].innerHTML=opr[i].innerHTML;
                          console.log(rows[i].cells[index].innerHTML);
                       };
                       box.innerHTML="";
                       arrn.splice(0,arrn.length);
                       box.style.display="none";
                       document.onmousemove=null; 
                       document.onmouseup=null;
                       document.onselectstart=function(){return false};     
                  }
                   this.onclick=null;
             }
        };
        
  }
  Drag("tableSort");
	  </script>
     
      
</body>
</html>