题目：如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。
姓名 力量 敏捷 智力
德鲁伊王 17 24 13
月之骑士 15 22 16
众神之王 19 15 20
流浪剑客 23 15 14
基本思路：
点击将各列数值存入数组第一次点击?(className=="as"?)升序排序(className="desc")按新排列的数组的顺序，将各列赋予新值降序排序(className="as")yesno
完整代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th id="th1" onclick="SortTable(this)" class="as">力量</th>
<th id="th2" onclick="SortTable(this)" class="as">敏捷</th>
<th id="th3" onclick="SortTable(this)" class="as">智力</th>
</tr>
<tr>
<td name="td0">德鲁伊</td>
<td name="td1">17</td>
<td name="td2">24</td>
<td name="td3">13</td>
</tr>
<tr>
<td name="td0">月之骑士</td>
<td name="td1">15</td>
<td name="td2">22</td>
<td name="td3">16</td>
</tr>
<tr>
<td name="td0">众神之王</td>
<td name="td1">19</td>
<td name="td2">15</td>
<td name="td3">20</td>
</tr>
<tr>
<td name="td0">流浪剑客</td>
<td name="td1">23</td>
<td name="td2">15</td>
<td name="td3">14</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
var tag=1;
function sortNumberAS(a, b)
{
return a - b
}
function sortNumberDesc(a, b)
{
return b-a
}
function SortTable(obj){
var td0s=document.getElementsByName("td0");
var td1s=document.getElementsByName("td1");
var td2s=document.getElementsByName("td2");
var td3s=document.getElementsByName("td3");
var tdArray0=[];
var tdArray1=[];
var tdArray2=[];
var tdArray3=[];
for(var i=0;i<td0s.length;i++){
tdArray0.push(td0s[i].innerHTML);
}
for(var i=0;i<td1s.length;i++){
tdArray1.push(parseInt(td1s[i].innerHTML));
}
for(var i=0;i<td2s.length;i++){
tdArray2.push(parseInt(td2s[i].innerHTML));
}
for(var i=0;i<td3s.length;i++){
tdArray3.push(parseInt(td3s[i].innerHTML));
}
var tds=document.getElementsByName("td"+obj.id.substr(2,1));
var columnArray=[];
for(var i=0;i<tds.length;i++){
columnArray.push(parseInt(tds[i].innerHTML));
}
var orginArray=[];
for(var i=0;i<columnArray.length;i++){
orginArray.push(columnArray[i]);
}
if(obj.className=="as"){
columnArray.sort(sortNumberAS); //排序后的新值
obj.className="desc";
}else{
columnArray.sort(sortNumberDesc); //排序后的新值
obj.className="as";
}
for(var i=0;i<columnArray.length;i++){
for(var j=0;j<orginArray.length;j++){
if(orginArray[j]==columnArray[i]){
document.getElementsByName("td0")[i].innerHTML=tdArray0[j];
document.getElementsByName("td1")[i].innerHTML=tdArray1[j];
document.getElementsByName("td2")[i].innerHTML=tdArray2[j];
document.getElementsByName("td3")[i].innerHTML=tdArray3[j];
orginArray[j]=null;
break;
}
}
}
}
</script>
HTML中实现Table表头点击升序/降序排序的相关教程结束。
![[LeetCode] 242. 有效的字母异位词 valid-anagram(排序）](https://www.kunjuke.com/file/css/thumb/2.jpg/280-180.jpg)
![2023-05-16：给你一个 严格升序排列 的正整数数组 arr 和一个整数 k 。 请你找到这个数组里第 k 个缺失的正整数。 输入：arr = [2,3,4,7,11], k = 5。 输出：9](https://www.kunjuke.com/file/css/thumb/7.jpg/280-180.jpg)
