欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery 表格操作(交替顯示、拖動表格行、選擇行等)

 更新時間：2009年07月29日 02:17:19   作者：  
JQuery 表格操作包括交替顯示、拖動表格行、選擇行等功能，大家可以參考下。
JQuery 確實很方便，簡單的代碼，卻能實現(xiàn)一些不錯的功能。
復制代碼 代碼如下:

<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 表示引發(fā)事件的對象，但它不是 jquery 對象
            }).hover(        //注意這里的鏈式調(diào)用
                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;    //防止拖動時選取文本內(nèi)容，必須和 mousemove 一起使用
        });
        rows.mousemove(function(){
            return false;    //防止拖動時選取文本內(nèi)容，必須和 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');    //區(qū)分大小寫的，寫成 '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: 獲取該事件發(fā)生前鼠標所在位置處的元素
            {
                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 下會有問題，F(xiàn)F 正常，下同
            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;">關(guān)鍵詞</th>
<th style="width:150px;">發(fā)布日期</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將探討操作系統(tǒng)的未來</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>聯(lián)想集團董事長柳傳志：聯(lián)想將在一年內(nèi)成功</td>
<td>聯(lián)想</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實驗室提出新標簽頁理念并發(fā)布原始模型</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之父學程序設(shè)計</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>聯(lián)發(fā)科助力 Windows Mobile加入山寨大軍</td>
<td>聯(lián)發(fā)科</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開發(fā)工具4.5版發(fā)布</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代碼支持自動平行優(yōu)化</td>
<td>IBM</td>
<td>2009-02-01 21:14</td>
</tr>
</tbody>
</table>

完整代碼下載：JQuery 表格操作

相關(guān)文章

最新評論