HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索栏提示</title>
<link type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
<ul id="main">
<li>分类方式
<ul class="drop">
<div>
<li onclick="sort(0)">名称</li>
<li onclick="sort(1)">价格</li>
<li onclick="sort(2)">销量</li>
</div>
</ul>
</li>
</ul>
<br>
<br>
<table class="myTable" id="myTable">
<tr>
<th>名称</th>
<th>价格</th>
<th>销量</th>
</tr>
<tr>
<td>大话设计模式</td>
<td>45</td>
<td>12</td>
</tr>
<tr>
<td>计算机组成原理</td>
<td>46</td>
<td>10</td>
</tr>
<tr>
<td>数据库系统概述</td>
<td>42</td>
<td>20</td>
</tr>
</table>
</body>
<script type="text/javascript" src="show.js"></script>
</html>
CSS
#main {
list-style: none;/*取消原有属性*/
display: inline-block;
border:solid black 1px;
}
#main li {
display: inline-block;
cursor: pointer;
z-index: 5;
min-width: 120px;
}
.drop {
overflow: hidden;/*配合动画效果溢出将其隐藏*/
list-style: none;
position: absolute;
left:0%;
width: 40%;
}
/*动画效果，还不太懂*/
.drop div {
transform: translate(0, -100%);
transition: all 0.5s 0.1s;
}
.drop li {
border-bottom:solid black 1px;
}
#main li:nth-child(1):hover ul div {/*相当于hover事件*/
transform: translate(0, 0);
}
/*单线表格*/
.myTable{
border-collapse: collapse;
}
.myTable td, th {
border: 1px solid black;
}
JS
function sort(x){
var table=document.getElementById("myTable");
var test=true,isSwitch=false,tr,i=0,a,b;
/*冒泡排序的变种，js的swap比较特殊嘛*/
while(test){
test=false;/*如果逆序，就继续进行交换*/
isSwitch=false;
tr=table.getElementsByTagName("TR");
for(i=1;i<tr.length-1;i++){
a=tr[i].getElementsByTagName("TD")[x].innerHTML.toLowerCase();
b=tr[i+1].getElementsByTagName("TD")[x].innerHTML.toLowerCase();
if(a>b){
test=true;
isSwitch=true;
break;
}
}
if(isSwitch){
tr[i].parentNode.insertBefore(tr[i+1],tr[i]);/*把tr[i+1]插入到tr[i]的前面,相当于交换了位置*/
}
}
}
原文：https://www.cnblogs.com/508335848vf/p/12849290.html