用javascript实现表格排序

最新推荐文章于 2025-02-23 15:29:43 发布

追星逐月丶

最新推荐文章于 2025-02-23 15:29:43 发布

阅读量508

点赞数

文章标签： html javascript 表格排序

本文链接：https://blog.youkuaiyun.com/qq_22187867/article/details/51442928

版权

初始的表格如图：

当点击表头中的”力量“时，表格会根据力量值的大小，升序排练，如下图：

当再次点击表头中的力量时，表格会根据力量值的大小，降序排列，如下图：

点击其他的表头也能达到同样的效果。

具体代码如下：

<!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>