点击表格表头，按照这一列的数据重新排列，点击一次降序，再点击升序，各列不会互相影响降序和升序的轮换。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>html</title>
<style>
table{
width: 500px;
height: 300px;
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th onclick="sortTable(1)">力量</th>
<th onclick="sortTable(2)">敏捷</th>
<th onclick="sortTable(3)">智力</th>
</tr>
</thead>
<tbody>
<tr>
<td>悟空</td>
<td>17</td>
<td>24</td>
<td>13</td>
</tr>
<tr>
<td>唐僧</td>
<td>15</td>
<td>22</td>
<td>16</td>
</tr>
<tr>
<td>玉帝</td>
<td>19</td>
<td>15</td>
<td>20</td>
</tr>
<tr>
<td>杨戬</td>
<td>23</td>
<td>15</td>
<td>14</td>
</tr>
<tr>
<td>如来</td>
<td>16</td>
<td>8</td>
<td>54</td>
</tr>
</tbody>
</table>
<script>
var tbody = document.getElementsByTagName('tbody')[0]; //表格的内容
var tr_collection = tbody.children;
var isSort = [true,true,true];
const sortTable = function(row){
var td_Array = [];
for(let i=0;i<tr_collection.length;i++){
td_Array.push(tr_collection[i].children[row]) //把每一列的td元素添加到数组中
}
var td_Sort;
if(row ===1){
if(isSort[0]){
td_Sort = td_Array.sort((a,b)=>(Number(a.innerText)-Number(b.innerText)));
isSort[0] = !isSort[0];
}
else if(!isSort[0]){
td_Sort = td_Array.sort((a,b)=>(Number(b.innerText)-Number(a.innerText)));
isSort[0] = !isSort[0];
}
}
if(row ===2){
if(isSort[1]){
td_Sort = td_Array.sort((a,b)=>(Number(a.innerText)-Number(b.innerText)));
isSort[1] = !isSort[1];
}
else if(!isSort[1]){
td_Sort = td_Array.sort((a,b)=>(Number(b.innerText)-Number(a.innerText)));
isSort[1] = !isSort[1];
}
}
if(row ===3){
if(isSort[2]){
td_Sort = td_Array.sort((a,b)=>(Number(a.innerText)-Number(b.innerText)));
isSort[2] = !isSort[2];
}
else if(!isSort[2]){
td_Sort = td_Array.sort((a,b)=>(Number(b.innerText)-Number(a.innerText)));
isSort[2] = !isSort[2];
}
}
for(let j =0;j<td_Sort.length;j++){
tbody.appendChild(td_Sort[j].parentElement); //按照每一列的td排序之后，将td父元素
//也就是tr元素按顺序插入到tbody中
}
}
</script>
</body>
</html>