需求：点击表头的某一列，根据点击的顺序进行升序降序交互排序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table tr td{
border:1px solid #000;
}
thead tr th{
border:1px solid #000;
}
</style>
</head>
<body style="display: flex">
<table style="margin: 0 auto" id="myTable">
<thead>
<tr><th>id</th><th>price</th><th>sales</th></tr>
</thead>
<tbody id="jsList">
<tr><td>1</td><td>10.0</td><td>800</td></tr>
<tr><td>2</td><td>30.0</td><td>600</td></tr>
<tr><td>3</td><td>20.5</td><td>700</td></tr>
<tr><td>4</td><td>40.5</td><td>500</td></tr>
<tr><td>5</td><td>60.5</td><td>300</td></tr>
<tr><td>6</td><td>50.0</td><td>400</td></tr>
<tr><td>7</td><td>70.0</td><td>200</td></tr>
<tr><td>8</td><td>80.5</td><td>100</td></tr>
</tbody>
</table>
</body>
<script>
var arr = [];
var oTable = document.getElementById('myTable');
var oTr = document.getElementsByTagName('tr');
var child = oTr[0].childNodes; //获取所有的孩子节点
//把数据写入二维数组中
for(var i = 1; i < oTr.length; i++){
var brr = [];
for(let j = 0; j < child.length; j++){
brr.push(oTr[i].childNodes[j].innerText);
}
arr.push(brr);
}
//保存点击每一列的次数
var count = [0,0,0];
//1、使用事件委托给table添加click事件监听
oTable.addEventListener('click',sortByCol,false);
function sortByCol(ev){
//浏览器兼容
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//2、获取点击的是哪一列
if(target.nodeName.toLowerCase() === 'th'){
for(var i = 0; i < child.length; i++){
if(target.innerText === child[i].innerText){
//分别计数每一列的点击事件，与2取余然后判断是升序还是降序
count[i]++;
sortByIndex(i,arr,count[i]);
}
}
}
}
function sortByIndex(index,arr,flag){
var crr = [];
for(let i = 0; i < arr.length; i++){
crr.push(arr[i][index]);
}
//根据点击的次数选择升序还是降序
if(flag%2 === 0){
crr.sort(function(a,b){
return a - b;
})
}else{
crr.sort(function(a,b){
return b - a;
})
}
console.log(crr);
var res = [];
for(let i = 0; i < crr.length; i++){
for(let j = 0; j < arr.length; j++){
if(arr[j].indexOf(crr[i])!==-1){
res.push(arr[j]);
}
}
}
//再把数组中的数据渲染到table中
for(let i = 1; i < oTr.length; i++){
for(let j = 0; j < child.length; j++){
oTr[i].childNodes[j].innerText = res[i-1][j];
}
}
}原图：
id降序
id升序
price降序
price升序
sales降序
sales升序
