content.json

[{"title":"HTML+Juery表格排序","date":"2017-03-30T03:26:58.000Z","path":"2017/03/30/HTML+Juery表格排序/","text":"有如下表格，要求点击成绩单元格时，对内容根据成绩大小进行升序排序，再次点击进行降序排序。 姓名 性别 成绩 张三 男 77 李四 女 87 王五 未知 60 表格代码如下： 1234567891011121314151617181920212223242526<table> <thead> <tr> <th>姓名</th> <th>性别</th> <th id='click'>成绩</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>77</td> </tr> <tr> <td>李四</td> <td>女</td> <td>87</td> </tr> <tr> <td>王五</td> <td>未知</td> <td>60</td> </tr> </tbody></table> 首先定义数据格式： function Person(name,male,grade){ this.name = name; this.male = male; this.grade = grade; } Person.prototype = { constructor: Person } 然后获取表格内容： var data = new Array(); $('tbody tr').each(function(){ var single = new Person( $(this).find('td').eq(0).html(), $(this).find('td').eq(1).html(), $(this).find('td').eq(2).html()) data.push(single) }) 表格按照成绩排序： data.sort(function(a,b){ if(a.grade > b.grade) return -1; else if(a.grade < b.grade) return 1; return 0; }) Click事件： var flag = 1; $('#click').click(function(){ $('tbody').empty(); var html = ''; if(flag){ for(var i = 0; i < data.length; i++){ html += '<tr>'; html += '<td>' + data[i].name + '</td>'; html += '<td>' + data[i].male + '</td>'; html += '<td>' + data[i].grade + '</td>'; html += '</tr>'; } flag = 0; }else{ for(var i = data.length - 1; i >= 0; i--){ html += '<tr>'; html += '<td>' + data[i].name + '</td>'; html += '<td>' + data[i].male + '</td>'; html += '<td>' + data[i].grade + '</td>'; html += '</tr>'; } flag = 1; } $('tbody').html(html); }) 完成。 NOTE： Jquery遍历方法：.each()和.eq() JavaScript类的构造方法，此处采用构造函数法 数组排序.sort() Click事件没啥好说的了，清空dom再填入新的排序后的内容","tags":[]},{"title":"Hello World","date":"2017-03-14T14:29:05.000Z","path":"2017/03/14/hello-world/","text":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new \"My New Post\" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment","tags":[]}]