【Demo】jQuery 表格內容動態排序

本文轉載自查看原文 2017-08-31 16:26 3151 Demo/ demo

實現功能：

通過點擊表頭某個字段，實現內容的升序或降序排序。

效果如下：

完整代碼：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <style media="screen">
        table {
            border-collapse: collapse;
            border-color: rgba(205, 193, 222, 0.84);
        }
    </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>c001</td>
                <td>c#</td>
                <td>80</td>
            </tr>
            <tr>
                <td>c002</td>
                <td>Java</td>
                <td>70</td>
            </tr>
            <tr>
                <td>c003</td>
                <td>PHP</td>
                <td>60</td>
            </tr>
            <tr>
                <td>c004</td>
                <td>Perl</td>
                <td>50</td>
            </tr>
        </tbody>
    </table>

   <script>
        $(document).ready(function() {
            var sort_direction=1; //排序標志，1為升序，-1為降序
            $('th').each(function(i) {
                $(this).click(function() {
                    if(sort_direction==1) {
                        sort_direction=-1;
                    }
                    else {
                        sort_direction=1;
                    }
                    //獲得行數組
                    var trarr=$('table').find('tbody > tr').get();
                    //數組排序
                    trarr.sort(function(a, b) {
                        var col1=$(a).children('td').eq(i).text().toUpperCase();
                        var col2=$(b).children('td').eq(i).text().toUpperCase();
                        return(col1 < col2) ? -sort_direction: (col1 > col2) ? sort_direction: 0;
                        //返回-1表示a>b降序,返回1表示a<b升序,否則為0相等
                        /*
                         * if (col1 > col2) {
                            return sort_direction;
                        }else if(col1 <col2){
                            return -sort_direction;
                        }else{
                            return 0;
                        }*/
                    }
                    );
                    $.each(trarr, function(i, row) {
                        //將排好序的數組重新填回表格
                        $('tbody').append(row);
                    }
                    );
                }
                );
            }
            );
        }

    );
    </script>
    
  
</body>

</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue的動態表格Demo Bootstrap表格動態加載內容和排序功能 jQuery表格內容過濾 jQuery-表格的排序， jquery動態表格，動態添加表格行 jquery動態表格，動態添加表格行 jquery實現表格內容篩選 jQuery表格排序組件-tablesorter jquery動態創建表格 jquery動態合並表格行