jQuery 小实例 关于按字母排序

jQuery的强大再次不再赘述

一般情况下操作表格式数据的一种最常见的任务就是排序，在一个大型的表格中，能够对要寻找的信息进行重新排列是非常重要的，一般情况用来完成排序的方式有两种

：一种是服务器端排序，另一种是javascript排序，今天就来说说第二种排序：即脚本排序

上代码

<table class="sortable">
        <thead>
            <tr>
                <th></th>
                <th class="sort-alpha">Title</th>
                <th>Author</th>
                <th>Publish Date</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <img src="Images/accent.png" />
                </td>
                <td>zuilding
                </td>
                <td>Hagen Graf
                </td>
                <td>Feb 2007
                </td>
                <td>$40.49
                </td>
            </tr>
            <tr>
                <td>
                    <img src="Images/bullet.png" />
                </td>
                <td>Learning
                </td>
                <td>Douglas Paterson
                </td>
                <td>Dec 2006
                </td>
                <td>$40.49
                </td>
            </tr>
            <tr>
                <td>
                    <img src="Images/accent.png" />
                </td>
                <td>Observations
                </td>
                <td>Hagen Graf
                </td>
                <td>Feb 2007
                </td>
                <td>$40.49
                </td>
            </tr>
            <tr>
                <td>
                    <img src="Images/accent.png" />
                </td>
                <td>Global
                </td>
                <td>Hagen Graf
                </td>
                <td>Feb 2007
                </td>
                <td>$40.49
                </td>
            </tr>
            <tr>
                <td>
                    <img src="Images/accent.png" />
                </td>
                <td>China's
                </td>
                <td>Hagen Graf
                </td>
                <td>Feb 2007
                </td>
                <td>$40.49
                </td>
            </tr>
        </tbody>

    </table>

以上就是做一个简单的排序的表格，按标题进行排序

<script type="text/javascript">
        $(document).ready(function () {
            //这个方法是对奇偶行样式的控制
            var altercolumu = function ($table) {
                $('tbody tr:odd', $table).removeClass('even').addClass('odd');
                $('tbody tr:even', $table).removeClass('odd').addClass('even');
            }

            $('table.sortable').each(function () {
                var $table = $(this);
                altercolumu($table);
                $('th', $table).each(function (column) {
                      //遍历th标签找到class的属性为sort-alpha进行操作
                    if ($(this).is('.sort-alpha')) {
                        //设置鼠标移入和移除时的样式
                        $(this).addClass('.clickable').hover(function () {
                            $(this).addClass('.hover');
                        }, function () {
                            $(this).removeClass('.hover');
                        }).click(function () {
                          //在这里出发click事件时获取行元素的信息
                            var rows = $table.find('tbody > tr').get();
                          //这里主要调用sort这个方法进行排序
                            rows.sort();
                            rows.sort(function (a, b) {
                                var keyA = $(a).children('td').eq(column).text().toUpperCase();
                                var keyB = $(b).children('td').eq(column).text().toUpperCase();
                                if (keyA < keyB) return -1;
                                if (keyA > keyB) return 1;
                                return 0;
                            });
                            //重新排序后在进行显示的输出
                            $.each(rows, function (index, row) {
                                //这里面我用了append的方法因为这个方法不会复制节点，并且该方法会移动表格行而不是复制表格行
                                $table.children('tbody').append(row);
                            });
                            altercolumu($table);
                        });
                    }
                });
            });
        });

    </script>

这么一个小例子就完成了，可能写的不是很好，求指教