尊重劳动成果,转载请注明出处(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>

正常的学生信息:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2xsYWlsY3A=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

排序后的学生信息:

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

jQuery 有条件排序的更多相关文章

  1. Javascript 迭代法实现数组多条件排序

    多条件排序可能有很多种思路,效率也各不相同,我的方法可能只适合自己用,毕竟目的是为了实现功能,所以采用了最笨的方法,不过效果还是很理想的,经过多次测试,6列1000行数据,平均排序时间大约是:28ms ...

  2. Oracle order by case when 多条件排序

    ORACLE sql 排序 根据两个条件排序,根据id号由小到大排序,同时country字段是北京的排最前面前面,其次上海,..大连,最后是其他城市,怎么写? 写法如下:select * from p ...

  3. 飘逸的python - 多条件排序及itemgetter的应用

    曾经客户端的同事用as写一大堆代码来排序,在得知python排序往往只需要一行,惊讶无比,遂对python产生浓厚的兴趣. 之前在做足球的积分榜的时候需要用到多条件排序,如果积分相同,则按净胜球,再相 ...

  4. 飘逸的python - 有的升序有的降序的情况下怎么多条件排序

    之前在统计导出各区服玩家消费的时候需要进行升序降序混搭的多条件排序. 需求是这样的.区服从小到大排,如果区服相同,则按消费从大到小排. 实现方法是利用python的sort算法是稳定排序,对数据进行多 ...

  5. python sorted函数多条件排序是怎么回事

    首先,要知道sorted 内部实现使用了归并排序,而归并排序是稳定的排序,就是说当元素比不出大小时,其相对位置是不变的. 那么,利用稳定排序的特性,key函数有几个返回值就排序几次,先排序次要条件,后 ...

  6. spring jpa Pageable 分页之---多条件排序

    Sort sort = new Sort(Direction.ASC, "sort").and(new Sort(Direction.DESC, groupField));//排序 ...

  7. [Python] dict字典排序和多条件排序

    利用lambda实现排序:要实现多条件排序,只需要依次指定排序的标准,具体实现如下 counter = {'是': 1, '不是': 1, '你': 3} counter_list = sorted( ...

  8. Sql多条件排序

    多条件排序可以通过在order by语句后面使用case when then条件语句来实现. end 例子: 1.创建表case_test 共有id,case_type,case_location,c ...

  9. Mysql->order by SQL 根据多个条件排序

    Mysql中根据多个条件排序:(各个条件间使用逗号隔开)   首先根据class_name字符串长短升序排列,然后根据开始时间降序排列: SELECT * FROM signup_class s OR ...

随机推荐

  1. 使用python向Redis批量导入数据

    1.使用pipeline进行批量导入数据.包含先使用rpush插入数据,然后使用expire改动过期时间 class Redis_Handler(Handler): def connect(self) ...

  2. 组队赛第二场:字符串哈希+DP

    长春现场赛 HDU 4821  思路:这题周赛的时候没做出来,有点可惜了.要是当时记起来unsigned long long自己主动取模,然后提醒一下大帝的话,后续大帝就能过了. 唉,导致让他取了好多 ...

  3. hadoop在实现kmeans算法——一个mapreduce实施

    写mapreduce程序实现kmeans算法.我们的想法可能是 1. 次迭代后的质心 2. map里.计算每一个质心与样本之间的距离,得到与样本距离最短的质心,以这个质心作为key,样本作为value ...

  4. UC高级编程--实现myls程序

    跟着达内视频,学习UC高级编程,完毕程序小练习. 主要练习的函数为:  int lstat(const char *path, struct stat *buf);  size_t strftime( ...

  5. jenkins 安装 SVN Publisher 后向 svn 提交代码报错: E170001: Authentication required for...

    问题描写叙述 安装并启动 jenkins 后,加入了 SVN Publisher 插件,然后在构建任务的"构建后操作"操作中加入了"Publish to Subversi ...

  6. Linux C语言写的超级简单port扫描器

    这个本来曾经也写过的,今天无聊复习下 再写一遍.简单的一塌糊涂,写的不咋地大家见谅哦!有空再加强 嘿嘿! #include <stdio.h> #include <stdlib.h& ...

  7. sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)

    在使用Hibernate的J2EE项目中,莫名其妙出现如上错误,既不报错,也不运行不论什么输出測试代码,更不返回结果. 经过排查,在方法里面引用的实体类和其映射文件属性个数不一致. 改动一致后,即解决 ...

  8. android--自己定义ProgressDialog显示位置(其他Dialog子类都能够设置)

    1.普通情况下,系统默认的Dialog显示位置为屏幕居中: pbDialog = new ProgressDialog(MainActivity.this); pbDialog.setMessage( ...

  9. Java 二次MD5 32位小写加密算法与php页面加密结果相同

    最近做的一个项目需要使用MD5加密算法,需要加密的参数有两个.自己先试了几次,算的结果为php页面的不一样,后来与写php页面的同事沟通后,了解到php页面的算法如下: action = " ...

  10. uva11600 状压期望dp

    一般的期望dp是, dp[i] = dp[j] * p[j] + 1; 即走到下一步需要1的时间,然后加上 下一步走到目标的期望*这一步走到下一步的概率 这一题,我们将联通分块缩为一个点,因为联通块都 ...