精华内容
下载资源
问答
  • 本文实例为大家分享了JavaScript实现HTML表格排序功能,供大家参考,具体内容如下 HTML代码: <td>click me <td>click me <td>click me <td>click me <span id=bfn_la_bac.usa>15.43 </td>
  • 对于对于一些表格按价格 等进行排序,方便用户对当前页面的高低价格排序,用户体验性好
  • html 表格排序

    2019-07-07 16:29:51
    1. 表格头部,需要用thead定义,并定义id为tableSort <table id="tableSort" border="1"> <thead> <tr> <th width="100px">序号</th> <th width="200px">书名&...

    1.  表格头部,需要用thead定义,并定义id为tableSort

    <table id="tableSort" border="1">
    <thead>
            <tr>
                <th width="100px">序号</th>
                <th width="200px">书名</th>
                <th width="300px">作者</th>
            </tr>
         </thead>

    2. 添加js代码

    <script type="text/javascript">
            $(document).ready(function(){
                var tableObject = $('#tableSort');//获取id为tableSort的table对象
                var tbHead = tableObject.children('thead');//获取table对象下的thead
                var tbHeadTh = tbHead.find('tr th');//获取thead下的tr下的th
                var tbBody = tableObject.children('tbody');//获取table对象下的tbody
                var tbBodyTr = tbBody.find('tr');//获取tbody
    展开全文
  • Javascript对HTML表格排序-很实用

    万次阅读 热门讨论 2018-07-25 22:11:41
    Javascript对HTML表格排序-很烂但实用 Javascript实现HTML表格排序,点击表头的标题单元格,即可对该列排序,升序降序切换,数字、文本都可以排序。 先看下面的效果图: 该功能已经封装成了一个Javascript函数...

    Javascript对HTML表格排序-很实用

    Javascript实现HTML表格排序,点击表头的标题单元格,即可对该列排序,升序降序切换,数字、文本都可以排序。

    先看下面的效果图:

    这里写图片描述

    该功能已经封装成了一个Javascript函数,要实现表格排序的功能非常简单,只需:

    1. 引入包含该函数的js文件(需要预先引入jQuery)—— 这个不难
    2. 在需要排序的表格的标题单元格(th元素)的class属性添加sortable类,如 <th class="sortable">(也可以自定义类名。在调用排序函数时传入该类名即可)。—— 就是添加个样式类,这个也不难
    3. 调用sortTable()进行排序 —— 一行代码而已

    该函数将:
    1. 自动寻找对应的表格table元素,以及排序内容所在的tbody元素
    2. 绑定标题单元格的点击事件进行排序,升序降序切换
    3. 给标题单元格添加排序图标—— ↓↑ (依赖于font-awesome 图标库),以及文字提示,鼠标停留时指针变成手型(cursor: pointer)

    说明:

    1. 排序时,指定单元格中的空格、百分号 <script type="math/tex" id="MathJax-Element-6">%</script>、和逗号,会被过滤掉,以支持数值被格式化的情况,如数字123,455.0
    2. 可以支持自定义指定排序列的类名和排序比较函数,调用形式如下:

      sortTable(selector,compFunc);
      // selector 是用来选定需要排序的单元格所在列,如 .sortable
      // compFunc 是用来对单元格比较的函数,compFunc($td1,$td2,isAsc)
      // 前两个函数是td元素的jQuery对象,isAsc为true则为升序,否则为降序

    代码如下:

    function sortTable(selector, compFunc) {
          var mySelector = '.sortable';
          var myCompFunc = function($td1, $td2, isAsc) {
            var v1 = $.trim($td1.text()).replace(/,|\s+|%/g, '');
            var v2 = $.trim($td2.text()).replace(/,|\s+|%/g, '');
            var pattern = /^\d+(\.\d*)?$/;
            if (pattern.test(v1) && pattern.test(v2)) {
              v1 = parseFloat(v1);
              v2 = parseFloat(v2);
            }
    
            return isAsc ? v1 > v2 : v1 < v2;
          };
    
          var doSort = function($tbody, index, compFunc, isAsc)
          {
            var $trList = $tbody.find("tr");
            var len = $trList.length;
            for(var i=0; i<len-1; i++) {
              for(var j=0; j<len-i-1; j++) {
                var $td1 = $trList.eq(j).find("td").eq(index);
                var $td2 = $trList.eq(j+1).find("td").eq(index);
    
                if (compFunc($td1, $td2, isAsc)) {
                  var t = $trList.eq(j+1);
                  $trList.eq(j).insertAfter(t);
                  $trList = $tbody.find("tr");
                }
              }
            }
          }
    
          var init = function() {
            var $th = $("th" + selector);
            this.$table = $th.closest("table");
            var that = this;
            $th.click(function(){
              var index = $(this).index();
              var asc = $(this).attr('data-asc');
              isAsc = asc === undefined ? true : (asc > 0 ? true : false);
    
              doSort(that.$table.find("tbody"), index, compFunc, isAsc);
    
              $(this).attr('data-asc', 1 - (isAsc ? 1 : 0));
            });
    
            $th.css({'cursor': 'pointer'})
               .attr('title', '点击排序')
               .append('&nbsp;<i class="fa fa-long-arrow-down" style="color:#2196F3" aria-hidden="true"></i><i class="fa fa-long-arrow-up" style="color:#2196F3" aria-hidden="true"></i>');
          };
    
    
          selector = selector || mySelector;
          compFunc = compFunc || myCompFunc;
    
          init();
        }

    该函数适用于给传统页面的表格添加上排序功能,非常少的改动。
    如果是基于Vue.js等数据驱动视图的框架做的页面,则实现表格排序很简单:
    由于表格是以数组为数据源渲染出来的,只需对数组排好序,页面自动更新。

    展开全文
  • tablesort是一款很好用的jQuery表格排序插件。 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便。 使用jQuery tablesort实现html表格方法: 1. 下载jQuery和tablesort脚本,并在html中引用该脚本...
  • html表格排序资源

    2020-12-08 19:16:35
    html表格排序资源,tablesorter,jquery-tablesort,可以非常方便表格排序,不用自己去写代码,或者借助其他工具来排序。
  • 漂亮的html 表格排序实现
  • tablesorter实现HTML表格点击表头排序,同样适用于JSP、PHP等主流Web开发
  • 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话,肯定需要刷新.这点我还在...
  • 静态表格排序

    2018-12-06 13:40:37
    静态表格排序
  • 本文实例讲述了Vue.js实现可排序表格组件功能。分享给大家供大家参考,具体如下: 我们基于 Vue.js 实现一个可根据某列进行排序表格组件。 一个表格包含表头和数据两部分内容。因此,我们定义两个数组,columns ...
  • html表格数据排序

    2014-02-07 17:40:06
    html表格数据排序。此表格组件的每一列都支持排序功能,默认点击列头切换排序状态:升序,降序。
  • 本文实例讲述了JS实现简单表格排序操作。分享给大家供大家参考,具体如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-type" content="text/html" charset="utf-8"> <title&...
  • jQuery html表格排序插件:tablesorter

    万次阅读 2011-12-15 09:47:18
    tablesort是一款很好用的jQuery表格排序插件。 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便。 使用jQuery tablesort实现html表格方法: 1. 下载jQuery和tablesort脚本,并在html中引用该...

    tablesort是一款很好用的jQuery表格排序插件。 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便。

    使用jQuery tablesort实现html表格方法:

    1. 下载jQuery和tablesort脚本,并在html中引用该脚本文件:

    <script type="text/javascript" src="../jquery-latest.js"></script>

    <script type="text/javascript" src="../jquery.tablesorter.js"></script>

    2. 格式化需要排序的html表格:

    a. 给需要排序的表格指定CCS类:class="sort-table"

    b. 使用thead和tbody标签来标记表格头和表格正文

    c. 在表格头thead中需要使用th标签定义表头

    格式化好的html表格如下所示:

    <table border=1 width="800px" class="sort-table">
    <thead>
        <tr>
            <th>Date</th>
            <th>Usage</th>
            <th>Cost</th>
            <th>Remain</th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td>2008-3-25</td>
            <td>book place @dhgu</td>
            <td>-40</td>
            <td>-40</td>
        </tr>
        <tr>
            <td>2008-4-1</td>
            <td>book place @dhgu</td>
            <td>-40</td>
            <td>-80</td>
        </tr>
    </tbody>
    </table>

    3. 添加jQuery代码,启用html表格排序:

    在body中对在第二步中指定的排序表格css类调用tablesorter()函数:

    <body>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".sort-table").tablesorter();
        });
    </script>

    通过上面的3步,jQuery tablesort就可以实现对html表格的排序。

    jQuery插件tablesort下载:


    展开全文
  • 表格大家都十分熟悉,如今的CSS也使得表格的布局越来越光彩耀人。但是,无论如何,都掩饰不了那些包装下的死板。 那么如何让那些死板的数据 更具有可读性、可用性,能够让我们那些数据在“动”呢? 下面我们使用...
  • 很强大的html表格排序.rar
  • JavaScript Sort 表格排序

    2021-01-19 17:13:28
    表格排序 方法 要哪些参数? JavaScript中的sort方法直接就提供了排序的功能,不需要我们自己写个循环一个个的判断。但其机制仍然是那样的, 代码如下: [removed]=function(){ var MyArr=new Array(“red”,”green...
  • <!doctype html> <html lang="en"> <head>... 一款非常不错的表格列自由拖动排序js代码,单击鼠标长按表格列自由拖动排序,互换列排序代码,点击表格头部支持表格数据升降大小排序效果。
  • 在前端对表格排序的Jquery插件有很多,功能也很强大,比如说Jquery Data Tables对表格的处理就相当强大,可对表格进行排序,搜索,分页等操作,不过没有仔细研究过其实现原理。为了更好的理解在前端对表格进行排序的...
  • 参考代码: 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...JavaScript控制网页内表格排序</title> <style> 
  • JavaScripr版表格排序实现点击表头即可排序
  • 最近,因为项目需要,对表格排序做了一下摸索,整理如下: 1. 首先,可从官网下载tablesorter.js,但并不支持中文的排序,对其源码进行修改: 部分源码: function sortText(a, b) { return ((a < b> b) ? 1 : 0))...
  • 基于jquery的表格排序

    2021-01-21 13:01:34
    很多高手也位jquery写了专门的排序库,因为自己也想尝试一下, 当然运行速度实在不能接受,但是我会慢慢的把他改进的。 注:这里只是拿出了一部分代码来,查看演示demo 文档载入后给’th’添加click事件。 1. $(‘th...
  • 表格组件在HTML5中是提供的,查看TWaver提供的Demo,表格的使用还是比较多的,于是参考了其中的一个Demo,新建一个表格,并给表格赋值。很快一张表格就生成了。但是想想,如果数据库中有几千甚至几万条数据,一下子...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 67,506
精华内容 27,002
关键字:

html表格排序