JQuery 对表格的操作

最新推荐文章于 2020-10-26 10:18:38 发布

Daniel的技术博客

最新推荐文章于 2020-10-26 10:18:38 发布

阅读量1.4k

点赞数

分类专栏： JQuery 文章标签： jquery function table class javascript 开发工具

本文链接：https://blog.csdn.net/huang_dannier/article/details/5348439

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近看了Learning_jquery这本书，觉得其中对表格的操作还不错，把例子写出来和大家一起分享。申明一下，这是纯脚本的对表格的操作，不涉及后台代码。所以，开发的平台和工具并没有很大的关系，我用的开发工具是 Visual Studio 2008，当然，市场上有很多开发工具啦！随便自己。

本篇文章涉及的内容包括：表格的排序，分页

首先展示一下例子的效果

   <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        thead
        {
            background-color: Blue;
            color: White;
        }
        tr.odd
        {
            background-color: #ddd;
        }
        tr.even
        {
            background-color: #eee;
        }
        .clickable
        {
            text-decoration: underline;
        }
        .hover
        {
            background-color: #5dd354;
        }
        .sorted
        {
            background-color: #ded070;
        }
        .page-number
        {
            color: Black;
            margin:2px 10px;
            padding:2px 5px;
        }
        .active
        {
            border:solid 1px red;
            background-color:#76a7d2;
            }
        .pager
        {
            margin-bottom:10px;
            margin-left:20px;
            }
    </style>

            $('table.myTable').each(function() {
                var $table = $(this);                       //将table存储为一个jquery对象
                $table.alternateRowColors($table);          //在排序时隔行变色

                $('th', $table).each(function(column) {
                    var findSortKey;
                    if ($(this).is('.sort-alpha')) {       //按字母排序
                        findSortKey = function($cell) {
                            return $cell.find('sort-key').text().toUpperCase() + '' + $cell.text().toUpperCase();
                        };
                    } else if ($(this).is('.sort-numeric')) {       //按数字排序
                        findSortKey = function($cell) {
                            var key = parseFloat($cell.text().replace(/^[^/d.]*/, ''));
                            return isNaN(key) ? 0 : key;
                        };
                    } else if ($(this).is('.sort-date')) {          //按日期排序
                        findSortKey = function($cell) {
                            return Date.parse('1 ' + $cell.text());
                        };
                    }

if (findSortKey) {
$(this).addClass('clickable').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }).click(function() {

                            //反向排序状态声明
                            var newDirection = 1;
                            if ($(this).is('.sorted-asc')) {
                                newDirection = -1;
                            }

$table.find('th').removeClass('sorted-asc').removeClass('sorted-desc');

var $sortHead = $table.find('th').filter(':nth-child(' + (column + 1) + ')');

                            //实现反向排序
                            if (newDirection == 1) {
                                $sortHead.addClass('sorted-asc');
                            } else {
                                $sortHead.addClass('sorted-desc');
                            }

                            //调用隔行变色的函数
                            $table.alternateRowColors($table);
                            //移除已排序的列的样式,添加样式到当前列
                            $table.find('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');
                            $table.trigger('repaginate');
                        });
                    }
                });
            });
        });
        //分页
        $(function() {
            $('table.paginated').each(function() {
                var currentPage = 0;
                var numPerPage = 10;
                var $table = $(this);
                $table.bind('repaginate', function() {
                    $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
                });

var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table class="myTable paginated">
            <thead>
                <tr>
                    <th class="sort-alpha">
                        Last Name
                    </th>
                    <th class="sort-alpha">
                        First Name
                    </th>
                    <th>
                        Email
                    </th>
                    <th class="sort-numeric">
                        Due
                    </th>
                    <th class="sort-date">
                        Date
                    </th>
                    <th>
                        Web Site
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        Smith
                    </td>
                    <td>
                        John
                    </td>
                    <td>
                        jsmith@gmail.com
                    </td>
                    <td>
                        $50.00
                    </td>
                    <td>
                        Mar 2009
                    </td>
                    <td>
                        http://www.jsmith.com
                    </td>
                </tr>
                   .....

<tr>

</tr>

                    ....
            </tbody>
        </table>
    </div>
    </form>
</body>
</html>

Daniel的技术博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
JQuery 对表格的操作

最近看了Learning_jquery这本书，觉得其中对表格的操作还不错，把例子写出来和大家一起分享。申明一下，这是纯脚本的对表格的操作，不涉及后台代码。所以，开发的平台和工具并没有很大的关系，我用的开发工具是 Visual Studio 2008，当然，市场上有很多开发工具啦！随便自己。本篇文章涉及的内容包括：表格的排序，分页首先展示一下例子的效果
复制链接

扫一扫