js实现表格的排序功能

最新推荐文章于 2024-04-21 11:10:41 发布

huihui10086

最新推荐文章于 2024-04-21 11:10:41 发布

阅读量7.1k

点赞数

分类专栏： jq web前端 js 文章标签： web前端 js

本文链接：https://blog.csdn.net/u012763269/article/details/48244257

版权

web前端同时被 3 个专栏收录

58 篇文章 0 订阅

订阅专栏

36 篇文章 0 订阅

订阅专栏

13 篇文章 0 订阅

订阅专栏

之前的阿里线上笔试最后一道就是实现表格的排序功能，但当时由于时间有限没能完成，于是今天趁着午休时间完成了这个功能。

下面附上代码（有注释）：（该功能是完成了对age的升序（从小到大）的排序）

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		table {
			border: 1px solid #ccc;
			width: 1000px;
			margin: 20px auto;
			border-collapse: collapse;
			border-spacing: 0px;
			text-align: center;
		}
		th {
			
		}
		tr {
			border: 2px solid #ccc;
		}
	</style>
</head>
<body>
	<table class="tab">
		<tr><th>name</th><th>age</th></tr>
		<tbody class="tbody">
			<tr><td>name1</td><td>12</td></tr>
			<tr><td>name2</td><td>15</td></tr>
			<tr><td>name3</td><td>1</td></tr>
			<tr><td>name4</td><td>16</td></tr>
			<tr><td>name5</td><td>5</td></tr>
	    </tbody>
	</table>
	<p class="display"></p>
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
	<script type="text/javascript">
		$(function(){
			var $tr = $(".tbody").find('tr');
			var array =[];//[{index:0,age:12},{index:1,age:15}~~~]
			$tr.each(function(){
				var obj ={};
				obj["index"] = $(this).index();
				obj["age"] = $(this).children('td').last().html();
				obj["name"] = $(this).children('td').first().html();
				array.push(obj);
			});
			
             for(var i =0 ;i<array.length;i++){
            	console.log(array[i]);
            }
            $.each(array,function(i,elem){
                console.log(array[i].age);

            });
            //排序
            array.sort(sortBy);
            function sortBy(a,b){
            	return a.age-b.age;
            }
            for(var i =0 ;i<array.length;i++){
            	console.log(array[i]);
            }
            //删除旧数组生成新数组
            $('.tbody').empty().append($tr);
            for(var i =0 ;i<array.length;i++){
            	$('.tbody').append($tr.eq(array[i].index));
            }

		});
	</script>
</body>
</html>

代码部分最主要的还是js部分，我的主要思路是通过建立一个数组对象，将每一列的列数和age的大小放进去，然后通过对age的排序实现对这个对象数组的排序，最后再删除旧的表格生成新的表格。

huihui10086

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现表格的排序功能

之前的阿里线上笔试最后一道就是实现表格的排序功能，但当时由于时间有限没能完成，于是今天趁着午休时间完成了这个功能。下面附上代码（有注释）：（该功能是完成了对age的升序（从小到大）的排序） Document table { border: 1px solid #ccc; width: 1000px; margin: 20px auto; borde
复制链接

扫一扫