注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

IOS & JAVA KEY

(iMilo)

 
 
 

日志

 
 
关于我

All the splendor in the world is not worth a good friend!! Hello my friend!!

网易考拉推荐

对表格排序(升序<==>降序)--jQuery处理表格  

2011-03-02 22:01:47|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

2011-02-16

l  对表格排序(升序<==>降序)

知识点:

现在有一个表格,其中包含一些行和列。当用户选择表格的任一列时,它会按照(升序<==>降序)重新排列表格数据。

攻略:

1、  确定点击的是哪个列的标题;

2、  以升序或降序对列排序。

说明:

hover(over, out)方法:一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。

----over  [function]鼠标移到元素上要触发的函数;

----out   [function]鼠标移出元素要触发的函数;

addClass(class)方法:为每个匹配的元素添加指定的类名;

----class    [String] 一个或多个要添加到元素中的CSS类名,请用空格分开;

removeClass(class)方法:从所有匹配的元素中删除全部或指定的类;

“>”符号:是一个选择器,它代表选中元素的子元素;例如:在下面的例子中,它会选择元素E1中所有与元素E2匹配的子元素(语法:E1>E2

get()方法:取得所有匹配的DOM元素集合

这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,实际上是元素数组)。

如果你想直接操作DOM对象而不是jQuery对象,这个函数非常有用。

sort()函数:重复的从数组中每次取出两个元素(行),对其进行排序,函数会返回小于0、等于0或大于0,这会帮助两个元素(行)上移、下移进行排序。

$.each(object,[callback])方法通用遍历方法,可用于遍历数组和对象。

不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。

children([expr])取得一个包含匹配元素集合中每个元素的所有子元素的元素集合。

可以通过可选的表达式来过滤所匹配的子元素。注意:parents()将查找所有祖辈元素,而children()只考虑子元素而不考虑所有后代元素.

.toUpperCase()方法:将字符串转换为大写;

append()方法:对指定元素执行appendChild方法。

siblings([expr])方法:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

n  expr (可选)[String]用于筛选同辈元素的表达式

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>jQuery处理表格--对表格排序(升序--降序)</title>

    <script type="text/javascript" src="rs/js/jquery.js"></script>

    <script type="text/javascript">

    <!--

    $(

        function()

        {

           

            $('th').each(

                function(column)

                {

                    $(this).hover(

                        function()

                        {

                            $(this).addClass('hover');

                        },

                        function()

                        {

                            $(this).removeClass('hover');

                        }

                    );

                   

                    $(this).click(

                        function()

                        {

                            if($(this).is('.asc'))

                            {

                                $(this).removeClass('asc');

                                $(this).addClass('desc');

                                sortdir = -1;

                            }

                            else

                            {

                                $(this).removeClass('desc');

                                $(this).addClass('asc');

                                sortdir = 1;

                            }

                            $(this).siblings().removeClass('asc');

                            $(this).siblings().removeClass('desc');

                           

                            var rec = $('table').find('tbody > tr').get();

                            rec.sort(

                                function(a, b)

                                {

                                    var v1 = $(a).children('td').eq(column).text().toUpperCase();

                                    var v2 = $(b).children('td').eq(column).text().toUpperCase();

                                    return (v1 < v2) ? -sortdir : (v1 > v2) ? sortdir : 0;

                                }

                            );

 

                            $.each(rec,

                                function(index, row)

                                {

                                    $('tbody').append(row);

                                }

                            );

                           

                        }

                    );

                }

            );

        }

    );

    //-->

    </script>

    <style type="text/css">

    <!--

        .hover{

            cursor:default;

            background-color: cyan;

            color: blue;

        }

        .asc{

            background:url('rs/images/sort_asc.gif') no-repeat 42px;

        }

        .desc{

            background:url('rs/images/sort_desc.gif') no-repeat 42px;

        }

    //-->

    </style>

  </head>

  <body>

    <table border="1">

        <thead>

            <tr>

                <th>&nbsp;学号&nbsp;</th><th>&nbsp;姓名&nbsp;</th><th>&nbsp;评分&nbsp;</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>ST004</td><td>张三</td><td>87</td>

            </tr>

            <tr>

                <td>ST003</td><td>李四</td><td>90</td>

            </tr>

            <tr>

                <td>ST001</td><td>王五</td><td>85</td>

            </tr>

            <tr>

                <td>ST002</td><td>赵六</td><td>79</td>

            </tr>

        </tbody>

    </table>

  </body>

</html>

  评论这张
 
阅读(2853)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017