脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JQuery 表格操作

JQuery 表格操作(交替显示、拖动表格行、选择行等)

 更新时间：2009年07月29日 02:17:19   作者：  
JQuery 表格操作包括交替显示、拖动表格行、选择行等功能，大家可以参考下。
JQuery 确实很方便，简单的代码，却能实现一些不错的功能。
复制代码 代码如下:

<script type='text/javascript'><!--
    $(function(){
        //交替显示行
        $('#alternation').click(function(){                
            $('tbody > tr:odd', $('#example')).toggleClass('alternation');
        });

        //三色交替显示行
        $('#alternationThree').click(function(){                
            $('tbody > tr:nth-child(3n)', $('#example')).toggleClass('alternation');
            $('tbody > tr:nth-child(3n+2)', $('#example')).toggleClass('alternation3');
        });

        //选择行
        $('#selectTr').click(function(){
            //为表格行添加选择事件处理
            $('tbody > tr', $('#example')).click(function(){
                $('.selected').removeClass('selected');                    
                $(this).addClass('selected'); //this 表示引发事件的对象，但它不是 jquery 对象
            }).hover(        //注意这里的链式调用
                function(){
                    $(this).addClass('mouseOver');
                },
                function(){
                    $(this).removeClass('mouseOver');
                }
            );                
        });

        //增加排序功能
        $('#sort').click(tableSort);

        //获取排好序后的主键值
        $('#getSequence').click(function(){
            var sequence = [];
            $('#content input[name=noticeSelect]').each(function(){
                sequence.push(this.value);
            });
            alert(sequence.join(','));
        });

        //获取表格中已选择的复选框的值集合
        $('#getSelected').click(function(){
            var sequence = [];
            $('#content input[name=noticeSelect]:checked').each(function(){
                sequence.push(this.value);
            });
            alert(sequence.join(','));
        });

        //按日期降序排列
        $('#dateDesc').click(descByDate);
    });

    //表格排序
    function tableSort()
    {
        var tbody = $('#example > tbody');
        var rows = tbody.children();
        var selectedRow;
        //压下鼠标时选取行
        rows.mousedown(function(){
            selectedRow = this;
            tbody.css('cursor', 'move');
            return false;    //防止拖动时选取文本内容，必须和 mousemove 一起使用
        });
        rows.mousemove(function(){
            return false;    //防止拖动时选取文本内容，必须和 mousedown 一起使用
        });
        //释放鼠标键时进行插入
        rows.mouseup(function(){                
            if(selectedRow)
            {
                if(selectedRow != this)
                {
                    $(this).before($(selectedRow)).removeClass('mouseOver'); //插入                                                        
                }
                tbody.css('cursor', 'default');
                selectedRow = null;                        
            }                                
        });
        //标示当前鼠标所在位置
        rows.hover(
            function(){                    
                if(selectedRow && selectedRow != this)
                {
                    $(this).addClass('mouseOver');    //区分大小写的，写成 'mouseover' 就不行                        
                }                    
            },
            function(){
                if(selectedRow && selectedRow != this)
                {
                    $(this).removeClass('mouseOver');
                }
            }
        );

        //当用户压着鼠标键移出 tbody 时，清除 cursor 的拖动形状，以前当前选取的 selectedRow            
        tbody.mouseover(function(event){
            event.stopPropagation(); //禁止 tbody 的事件传播到外层的 div 中
        });    
        $('#contain').mouseover(function(event){
            if($(event.relatedTarget).parents('#content')) //event.relatedTarget: 获取该事件发生前鼠标所在位置处的元素
            {
                tbody.css('cursor', 'default');
                selectedRow = null;
            }
        });
    }

    //按日期降序排列
    function descByDate()
    {
        var descElements = $('#content > tr').get().sort(function(first, second){                
            var f = $('td:eq(4)', first).html();    //first = $('td:eq(4)', first).html();IE 下会有问题，FF 正常，下同
            var s = $('td:eq(4)', second).html();
            if(f < s)
                return 1;                
            if(f == s)
                return 0;
            return -1;                
        });            
        $(descElements).appendTo('#content');
    }
// --></script>

HTML：
复制代码 代码如下:

<table id='example' style="width:650px; border-collapse:collapse;">
<thead style="text-align:center;" style="text-align:center;">
<tr><td colspan='5'>公告列表</td></tr>
<tr>
<th style="width:50px;">選擇</th>
<th style="width:50px;">序號</th>
<th style="width:300px;">標題</th>
<th style="width:100px;">關鍵詞</th>
<th style="width:150px;">發布日期</th>
</tr>
</thead>
<tbody id='content'>
<tr>
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='1' /></td>
<td style="text-align:center;" style="text-align:center;">01</td>
<td>微軟在 VS 2008 中引入了 jquery</td>
<td>Microsoft</td>
<td>2009-01-02 10:30</td>
</tr>
<tr>
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='2' /></td>
<td style="text-align:center;" style="text-align:center;">02</td>
<td>Linux微软Sun将探讨操作系统的未来</td>
<td>Sun</td>
<td>2009-01-03 09:30</td>
</tr>
<tr>
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='3' /></td>
<td style="text-align:center;" style="text-align:center;">03</td>
<td>联想集团董事长柳传志：联想将在一年内成功</td>
<td>聯想</td>
<td>2009-01-05 14:30</td>
</tr>
<tr>
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='4' /></td>
<td style="text-align:center;" style="text-align:center;">04</td>
<td>美议员要求立法限制Google地球 违反将日罚25万</td>
<td>Google</td>
<td>2009-01-10 20:45</td>
</tr>
<tr>
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='5' /></td>
<td style="text-align:center;" style="text-align:center;">05</td>
<td>FireFox实验室提出新标签页理念并发布原始模型</td>
<td>FireFox</td>
<td>2009-01-14 17:58</td>
</tr>
<tr>
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='6' /></td>
<td style="text-align:center;" style="text-align:center;">06</td>
<td>向Ruby之父学程序设计</td>
<td>Ruby</td>
<td>2009-01-19 07:22</td>
</tr>
<tr>
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='7' /></td>
<td style="text-align:center;" style="text-align:center;">07</td>
<td>Apple智能手机市场份额翻番达10.7%</td>
<td>Apple</td>
<td>2009-01-21 10:44</td>
</tr>
<tr>
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='8' /></td>
<td style="text-align:center;" style="text-align:center;">08</td>
<td>联发科助力 Windows Mobile加入山寨大军</td>
<td>联发科</td>
<td>2009-01-22 16:37</td>
</tr>
<tr>
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='9' /></td>
<td style="text-align:center;" style="text-align:center;">09</td>
<td>Nokia的开源Qt开发工具4.5版发布</td>
<td>Nokia</td>
<td>2009-01-28 14:08</td>
</tr>
<tr>
<td style="text-align:center;" style="text-align:center;"><input type='checkbox' name='noticeSelect' value='10' /></td>
<td style="text-align:center;" style="text-align:center;">10</td>
<td>GCC将接受IBM代码支持自动平行优化</td>
<td>IBM</td>
<td>2009-02-01 21:14</td>
</tr>
</tbody>
</table>

完整代码下载：JQuery 表格操作
您可能感兴趣的文章:

相关文章

  • JavaScript图片打印方案实例详解

    JavaScript图片打印方案实例详解

    有时候我们希望文件上传的时候预览图片,下面这篇文章主要给大家介绍了关于JavaScript图片打印方案的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • Bootstrap3 多选和单选框(checkbox)

    Bootstrap3 多选和单选框(checkbox)

    多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。接下来通过本文给大家介绍Bootstrap3 多选和单选框，一起看看吧
    2016-12-12
  • 用javascript实现截取字符串包含中文处理的函数

    用javascript实现截取字符串包含中文处理的函数

    一直不知道js可以截取中文字符，呵呵，原理用正则表达式，匹配中文的长度，中文算两个，因为算一个，是个好东西，推荐大家收藏
    2008-04-04
  • bootstrap导航条实现代码

    bootstrap导航条实现代码

    这篇文章主要为大家详细介绍了bootstrap导航条的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • javascript字体颜色控件的开发 JS实现字体控制

    javascript字体颜色控件的开发 JS实现字体控制

    小编给大家带来一个用javascript编写的能控制字体大小个颜色等基本信息的控件写法，喜欢的尝试编写一下。
    2017-11-11
  • 一文了解ES5和ES6的区别

    一文了解ES5和ES6的区别

    ES6是JavaScript语言的主要增强,允许我们编写程序,ES6适用于复杂的应用程序,尽管ES5和ES6在本质上有一些相似之处,但它们之间也有许多不同之处,下面这篇文章主要给大家介绍了关于ES5和ES6区别的相关资料,需要的朋友可以参考下
    2023-05-05
  • 基于JavaScript实现添加到购物车效果附源码下载

    基于JavaScript实现添加到购物车效果附源码下载

    这篇文章主要介绍了基于JavaScript实现添加到购物车效果附源码下载的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-08-08
  • javascript通过className来获取元素的简单示例代码

    javascript通过className来获取元素的简单示例代码

    本篇文章主要是对javascript通过className来获取元素的简单示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • javascript判断css3动画结束 css3动画结束的回调函数

    javascript判断css3动画结束 css3动画结束的回调函数

    本文主要给大家介绍的是如何使用javascript判断CSS3动画效果结束，主要是使用了javascript的回调函数，其思路是一旦动画或变换结束，回调函数就会触发。不再需要大型类库支持，非常的简单实用，推荐给大家。
    2015-03-03
  • JavaScript 严格模式(use strict)用法实例分析

    JavaScript 严格模式(use strict)用法实例分析

    这篇文章主要介绍了JavaScript 严格模式(use strict)用法,结合实例形式分析了JavaScript 严格模式的基本功能、用法及操作注意事项,需要的朋友可以参考下
    2020-03-03

最新评论