标签:
为了更好的理解在前端对表格进行排序的原理,也为了进一步的学习Jquery,所以决定用Jquery来实现一个对表格进行排序的小功能。
该实现的主要思想是:获取鼠标点击的表头单元格的列号,遍历数据行,获取每个<tr>中的html,同时获取每个<tr>标签下 对应获取到的列号的<td>标签中的内容,并取得<th>标签的type属性值,将获取<tr>的 html、<td>的内容和<th>的type属性值拼接成字符串添加到数组array中,然后将表格<tr>中的 html全部置空,根据type属性值的不同采用不同的方法对<td>的内容进行比较,根据比较结果对数组array进行排序,然后将排序后 的数组元素重新赋值给已经置空的<tr>。如果已经对该列排序过了,则直接对数组进行倒置。
先看效果图:
排序前:
按价格排序后
现在来看实现代码吧:
CSS代码:
HTML代码:
Jquery代码部分
标签:
原文地址:http://www.cnblogs.com/lengzhijun/p/4624796.html