自己动手丰衣足食之表格排序插件jquery.tableSort.js

简介:

这里写图片描述

下载地址:http://download.csdn.net/detail/cometwo/9446935

1.一定要引jQuery包,所有jq插件都是基于jQuery包的 2.如果想指定哪一栏不排序这样写 $(“#mytable”).tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了 参考:http://my.oschina.net/u/1421430/blog/192885

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
        <script type="text/javascript" src="js/jquery.tablesort.js"></script>
        <style type="text/css">
            #tip {
                border: solid 1px black;
                width: 358px;
                line-height: 21px;
                height: 21px;
                padding: 2px 10px;
                background-color: pink;
                font-size: 12px;
                text-align: center;
                margin: 10px auto 10px;
            }

            .table {
                width: 380px;
                margin: 0 auto;
                border-collapse: collapse;
                text-align: center;
            }

            .table tr td,
            .table tr th {
                background: greenyellow;
                border: solid 1px red;
                color: #666;
                height: 30px;
                /*line-height: 30px;*/
            }

            .table tr th {
                background: #89AFB1;
                color: red;
                text-align: center;
                font-size: 14px;
            }

            .table a,
            .table a:visited {
                color: red;
                text-decoration: none
            }

            .table a:hover,
            .table a:active {
                color: blue;
                text-decoration: none
            }
        </style>

        <script type="text/javascript">

            $(function() {
                $('table').tablesort().data('tablesort');
                var i = 0;
                $(".table tr th a").click(function() {
                    if (i % 2 == 0) {
                        $(".sj").text('升序');
                        i++;
                    } else {
                        $(".sj").text('降序');
                        i++;
                    }
                })
            })
        </script>
        </script>
    </head>

    <body>

        <div id="tip">默认无排列规则(<span class="sj">----</span>)</div>

        <table id="tbStudent" class="table">
            <tr>
                <th><a class="num" href="javascript:">编号</a></th>
                <th><a href="javascript:">姓名</a></th>
                <th><a href="javascript:">性别</a></th>
                <th><a href="javascript:">总分</a></th>
            </tr>
            <tr>
                <td>1031</td>
                <td>李渊</td>
                <td></td>
                <td>654</td>
            </tr>
            <tr>
                <td>1021</td>
                <td>张扬</td>
                <td></td>
                <td>624</td>
            </tr>
            <tr>
                <td>1011</td>
                <td>吴敏</td>
                <td></td>
                <td>632</td>
            </tr>
            <tr>
                <td>1026</td>
                <td>李小明</td>
                <td></td>
                <td>610</td>
            </tr>
            <tr>
                <td>1016</td>
                <td>周谨</td>
                <td></td>
                <td>690</td>
            </tr>
            <tr>
                <td>1041</td>
                <td>谢小敏</td>
                <td></td>
                <td>632</td>
            </tr>
            <tr>
                <td>1072</td>
                <td>刘明明</td>
                <td></td>
                <td>633</td>
            </tr>
            <tr>
                <td>1063</td>
                <td>蒋忠公</td>
                <td></td>
                <td>675</td>
            </tr>
        </table>
    </body>

</html>
AI 代码解读
目录
打赏
0
0
0
0
33
分享
相关文章
jquery无限循环内容滑块插件
jquery无限循环内容滑块插件
金融数据分析:解析JavaScript渲染的隐藏表格
本文详解了如何使用Python与Selenium结合代理IP技术,从金融网站(如东方财富网)抓取由JavaScript渲染的隐藏表格数据。内容涵盖环境搭建、代理配置、模拟用户行为、数据解析与分析等关键步骤。通过设置Cookie和User-Agent,突破反爬机制;借助Selenium等待页面渲染,精准定位动态数据。同时,提供了常见错误解决方案及延伸练习,帮助读者掌握金融数据采集的核心技能,为投资决策提供支持。注意规避动态加载、代理验证及元素定位等潜在陷阱,确保数据抓取高效稳定。
65 17
简单轻量级的jquery图表插件
简单轻量级的jquery图表插件
jQuery响应式内容选项卡插件
jQuery响应式内容选项卡插件
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
125 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
支持多种动画特效的响应式jQuery幻灯片插件
支持多种动画特效的响应式jQuery幻灯片插件