首页 > 代码库 > jQuery 按条件排序
jQuery 按条件排序
点击按钮，表格里就会按照分数的高低，将学生信息从分数高的往分数低的排序；
完整案例（jQuery需自己引入）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src=http://www.mamicode.com/"jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
var num=[];
var $tr=$(‘.tbody tr‘);
var $tbody=$(‘.tbody‘);
var $sheng=$(‘.da‘);
$tr.each(function(index, element) {
for(var i=0;i<$tr.length;i++){
num[i]=$tr.eq(i).find(‘td:nth-child(4)‘).html();
}
});
$sheng.click(function(e) {
for(var i=0;i<num.length;i++){
for(var j=i+1;j<num.length;j++){
//从大到小排序/
if(num[i]<num[j]){
var ss=num[i];
num[i]=num[j];
num[j]=ss;
var ss01=$tr[i];
$tr[i]=$tr[j];
$tr[j]=ss01;
}
}
}
$tbody.each(function(index, element) {
for(var i=0;i<$tr.length;i++){
$(this).append($tr[i])
}
});
});
})
</script>
</head>
<body>
<table width="200" border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>分数</th>
<th>大写</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td>1</td>
<td>张三</td>
<td>12</td>
<td bgcolor="#FF0000">45</td>
<td>SS</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>34</td>
<td bgcolor="#FF0000">41</td>
<td>WW</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>54</td>
<td bgcolor="#FF0000">21</td>
<td>S</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>22</td>
<td bgcolor="#FF0000">2</td>
<td>DC</td>
</tr>
<tr>
<td>5</td>
<td>钱七</td>
<td>21</td>
<td bgcolor="#FF0000">78</td>
<td>GHG</td>
</tr>
</tbody>
</table>
<button class="da">按分数排序</button>
</body>
</html>
正常的学生信息：
排序后的学生信息：
jQuery 按条件排序