初始的表格如图:
当点击表头中的”力量“时,表格会根据力量值的大小,升序排练,如下图:
当再次点击表头中的力量时,表格会根据力量值的大小,降序排列,如下图:
点击其他的表头也能达到同样的效果。
具体代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<table border="1">
<tr><th>姓名</th><th>力量</th><th>敏捷</th><th>智力</th></tr>
<tbody>
<tr><td>A</td><td>17</td><td>24</td><td>13</td></tr>
<tr><td>B</td><td>15</td><td>22</td><td>16</td></tr>
<tr><td>C</td><td>19</td><td>15</td><td>20</td></tr>
<tr><td>D</td><td>20</td><td>14</td><td>18</td></tr>
</tbody>
</table>
<script type="text/javascript">
var tdArray=[];
var th=document.querySelectorAll('th');
var td=document.querySelectorAll('td');
var tr=document.querySelectorAll('tr');
var tbody=document.querySelectorAll('tbody')[1];
var asc=1;
for(var i=1;i<th.length;i++){
tdArray[i-1]=[];
for(var j=1;j<tr.length;j++){
tdArray[i-1][j-1]=parseInt(td[i+(j-1)*4].innerHTML);
}
}
var tContent=[];
for(var i=1;i<tr.length;i++){
tContent[i-1]="<tr>"+tr[i].innerHTML+"</tr>";
}
for(var i=1;i<th.length;i++){
th[i].οnclick=function(n){
return function(){mysort(n);};
}(i);
}
function mysort(n){
var sortArray=tdArray[n-1].slice(0);
if(asc==1){ //升序
sortArray.sort(function(a,b){return b-a;});
asc=0;
}else{ //降序
sortArray.sort(function(a,b){return a-b;})
asc=1;
}
show(sortArray,n);
}
function show(sortArray,n){
var strtb="";
for(var i=0;i<sortArray.length;i++){
for(var j=0;j<tdArray[n-1].length;j++){
if(sortArray[i]==tdArray[n-1][j]){
strtb+=tContent[j];
}
}
}
tbody.innerHTML=strtb;
}
</script>
</body>
</html>