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

2024-05-06 14:14:34

字体：大中小

来源：转载

供稿：网友

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');
                }
            );

上一篇：jquery ui dialog里调用datepicker的问题

下一篇：jquery JSON的解析方式