skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增第154个小实例：可自由拖拽排序的表格

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2022-05-22 18:48:04 +08:00
parent 51fda3357d
commit f9f23c0d4a
4 changed files with 275 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -160,4 +160,5 @@
150. HTML5+CSS3+Vue小实例：仿制B站PC端首页的吃豆人轮播图
151. HTML5+CSS3+JS小实例：倒计时动画特效
152. HTML5+CSS3+JS小实例：Tab选项卡动画切换效果
153. HTML5+CSS3+JS小实例：悬停滚动文字的导航栏
153. HTML5+CSS3+JS小实例：悬停滚动文字的导航栏
154. HTML5+CSS3+JS小实例：可自由拖拽排序的表格

52
code/154/154.css Normal file
View File

@ -0,0 +1,52 @@
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
/* 弹性布局 居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: #eee;
}
.table-box{
width: 800px;
max-width: 90vw;
position: relative;
}
table{
width: 100%;
background-color: #fff;
border-spacing: 0;
border-collapse: collapse;
table-layout: fixed;
}
th{
background-color: #e7f3ff;
height: 25px;
cursor: pointer;
}
th,td{
color: #333;
font-size: 15px;
text-align: center;
padding: 8px 10px;
border: 1px solid #ddd;
}
/* 悬浮层 */
.box{
background-color: rgba(0,0,0,0.8);
color: #fff;
height: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.box p{
line-height: 37.5px;
font-size: 15px;
}

101
code/154/154.html Normal file
View File

@ -0,0 +1,101 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>可自由拖拽排序的表格</title>
<link rel="stylesheet" href="154.css">
</head>
<body>
<div class="table-box">
<table>
<tbody>
<tr>
<th title="点击排序" onclick="sortTable(0)">座号</th>
<th title="点击排序" onclick="sortTable(1)">姓名</th>
<th title="点击排序" onclick="sortTable(2)">性别</th>
<th title="点击排序" onclick="sortTable(3)">年龄</th>
<th title="点击排序" onclick="sortTable(4)">分数</th>
</tr>
<tr>
<td>1</td>
<td>张珊</td>
<td>女</td>
<td>17</td>
<td>80</td>
</tr>
<tr>
<td>2</td>
<td>李斯</td>
<td>男</td>
<td>18</td>
<td>86</td>
</tr>
<tr>
<td>3</td>
<td>王武</td>
<td>男</td>
<td>18</td>
<td>77</td>
</tr>
<tr>
<td>4</td>
<td>赵琉</td>
<td>女</td>
<td>17</td>
<td>93</td>
</tr>
<tr>
<td>5</td>
<td>孙琪</td>
<td>女</td>
<td>18</td>
<td>96</td>
</tr>
<tr>
<td>6</td>
<td>肖明</td>
<td>男</td>
<td>17</td>
<td>90</td>
</tr>
<tr>
<td>7</td>
<td>吴小红</td>
<td>女</td>
<td>18</td>
<td>97</td>
</tr>
<tr>
<td>8</td>
<td>刘小华</td>
<td>女</td>
<td>17</td>
<td>79</td>
</tr>
<tr>
<td>9</td>
<td>陆小军</td>
<td>男</td>
<td>19</td>
<td>63</td>
</tr>
<tr>
<td>10</td>
<td>汤小敏</td>
<td>女</td>
<td>17</td>
<td>88</td>
</tr>
</tbody>
</table>
<div class="box"></div>
</div>
</body>
</html>
<script src="154.js"></script>

120
code/154/154.js Normal file
View File

@ -0,0 +1,120 @@
// 点击表头排序
function sortTable(idx){
var otable=document.querySelector('table'), //获取表格
obody=otable.tBodies[0], //表格正文tbody
otr=obody.rows, //表格的行
tarr=[]; //临时数组
for(var i=1;i<otr.length;i++){
// 把除了表头之外的每一行都赋值到临时数组
tarr[i-1]=otr[i];
}
// sortCol属性时额外给table添加的属性，用于作顺反两种顺序排序时的判断，区分首次排序和后面的有序反转
if(obody.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(var i=0;i<tarr.length;i++){
// 把排序号的数组追加到节点对象
fragment.appendChild(tarr[i]);
}
// 把节点对象追加到tbody
obody.appendChild(fragment);
// 更新sortCol
obody.sortCol=idx;
}
// 拖拽排序
function DragSort(){
var otbox=document.querySelector('.table-box'), //表格容器
otable=document.querySelector('table'), //表格
obody=otable.tBodies[0], //表格正文
oth=obody.getElementsByTagName('th'), //表头
otd=obody.getElementsByTagName('td'), //单元格
box=document.querySelector('.box'), //拖拽时的悬浮层
arrn=[]; //用来记录每一个th的向左偏移量
// 循环每一个单元格
for(var i=0;i<otd.length;i++){
// 绑定每个单元格的鼠标按下事件
otd[i].onmousedown=function(e){
var e=e||window.event, //事件对象
target=e.target, //目标
thW=target.offsetWidth, //目标的偏移宽度
maxL=otbox.offsetWidth-thW, //计算最大的向左偏移量
rows=otable.rows, //表格的行
tboxL=otbox.offsetLeft, //表格容器的向左偏移量
disX=target.offsetLeft, //目标的向左偏移量
that=this, //把当前单元格对象（鼠标按下位置的对象）记录起来
cdisX=e.clientX-tboxL-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);
}
// 记录每一个th的向左偏移量
for(var i=0;i<oth.length;i++){
arrn.push(oth[i].offsetLeft);
}
// 显示悬浮层，并设置宽度、位置
box.style.display='block';
box.style.width=thW+'px';
box.style.left=disX+'px';
// 鼠标移动事件
document.onmousemove=function(e){
// 根据鼠标移动，实时设置悬浮层的位置
box.style.top=0;
box.style.left=e.clientX-tboxL-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;}
}
// 鼠标松开事件
document.onmouseup=function(e){
var ops=box.getElementsByTagName('p'),
oboxL=box.offsetLeft+cdisX;
for(var i=0;i<arrn.length;i++){
if(arrn[i]<oboxL){
// 松开鼠标时的arrn下标（即拖拽结束时的位置）
var index=i;
}
}
for(var i=0;i<rows.length;i++){
// 交换数据
rows[i].cells[that.cellIndex].innerHTML='';
rows[i].cells[that.cellIndex].innerHTML=rows[i].cells[index].innerHTML;
rows[i].cells[index].innerHTML='';
rows[i].cells[index].innerHTML=ops[i].innerHTML;
}
// 重置
box.innerHTML='';
arrn=[];
box.style.display='none';
document.onmousemove=null;
document.onmouseup=null;
document.onselectstart=function(){return false;}
}
}
}
}
// 初始化
DragSort();