jQuery 有条件排序

尊重劳动成果,转载请注明出处(http://blog.csdn.net/sllailcp/article/details/41011173)...


点击button,表格里就会依照分数的高低。将学生信息从分数高的往分数低的排序;

完整案例(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="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>


正常的学生信息:


排序后的学生信息:


版权声明:本文博主原创文章。博客,未经同意不得转载。

posted @ 2015-09-13 19:17  blfshiye  阅读(179)  评论(0编辑  收藏  举报