JavaScript 在客户端如何实现对表格数据的升降排序

最新推荐文章于 2021-06-18 13:18:11 发布
最新推荐文章于 2021-06-18 13:18:11 发布
阅读量1.1k 收藏 3
点赞数 1
分类专栏： JavaScript专辑 文章标签： javascript function table date border float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sutao_713/article/details/1922243
版权

<html>
<head>
    <title>JavaScript 在客户端如何实现对表格数据的升降排序</title>
</head>
<body>
    <table id="tbPerson" border="1" style="text-align: center;">
        <caption>
            <b>三国群英</b>
        </caption>
        <thead>
            <tr>
                <td style="width: 211px" οnclick="JavaScript:sortTable('tbPerson',0)">
                    <b>武将</b>
                </td>
                <td style="width: 274px" οnclick="JavaScript:sortTable('tbPerson',1,'int')">
                    <b>武力</b></td>
                <td style="width: 274px" οnclick="JavaScript:sortTable('tbPerson',2,'date')">
                    <b>生日</b>
                </td>
            </tr>
        </thead>
        <tfoot>点击表头以实现表格数据的升/降排序</tfoot>
        <tbody>
            <tr>
                <td style="width: 211px; height: 25px">
                    刘备
                </td>
                <td style="width: 274px; height: 25px">
                    76
                </td>
                <td style="width: 274px; height: 25px">
                    163-10-10
                </td>
            </tr>
            <tr>
                <td style="width: 211px">
                    周瑜
                </td>
                <td style="width: 274px">
                    80
                </td>
                <td style="width: 274px">
                    178-07-08
                </td>
            </tr>
            <tr>
                <td style="width: 211px">
                    张飞
                </td>
                <td style="width: 274px">
                    97
                </td>
                <td style="width: 274px">
                    165-02-23
                </td>
            </tr>
            <tr>
                <td style="width: 211px">
                    文丑
                </td>
                <td style="width: 274px">
                    93
                </td>
                <td style="width: 274px">
                    166-05-11
                </td>
            </tr>
           
        </tbody>
        </table>
  
</body>
</html>

<script language="JavaScript" type="text/JavaScript">
function sortTable(table_id,col_num,datatype)
{
 var oTable = document.getElementById(table_id);
 var oTbody = oTable.tBodies[0];
 var oTrs = oTbody.rows;
 var arrTrs = new Array();
 //alert(1);
 for(var i=0;i<oTrs.length;i++)
 {
     arrTrs[i] = oTrs[i];
 }
 
 if(oTable.sortCol ==col_num)
    arrTrs.reverse();
 else
    arrTrs.sort(generateCompareTrs(col_num,datatype));
   
 var fragment = document.createDocumentFragment();
 for(var i=0;i<arrTrs.length;i++)
 {
     fragment.appendChild(arrTrs[i]);
 }
 oTbody.appendChild(fragment);
 oTable.sortCol = col_num;

}
function generateCompareTrs(col_num,datatype)
{
    return function compareItem(arrTrs_item1,arrTrs_item2,datatype){
           var value1 = convertType(arrTrs_item1.cells[col_num].firstChild.nodeValue,datatype);
           var value2 = convertType(arrTrs_item2.cells[col_num].firstChild.nodeValue,datatype);
          
           if(value1 < value2)
              return -1;
           else if(value1 >value2)
              return 1;
           else
              return 0;
             
          
           }
 
}
function convertType(value,datatype)
{
 switch(datatype)
 {
         case "int":
            return parseInt(value);
         case "float":
            return parseFloat(value);
         case "date":
            return new Date(Date.parse(value));
          default:
             return value.toString();
    }
 
}

</script>

 

sutao_713
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现对表格元素进行排序操作
10-23
主要介绍了javascript实现对表格元素进行排序操作，分别可以实现点击之后排序和还原，和排升序和降序的功能，文章末尾附完整代码，感兴趣的小伙伴们可以参考一下
table表格排序，JavaScript自带排序功能，点击表头实现升序降序，非常方便
席海斌的博客
08-27 5241
   首先编写js文件，源码如下。我在这里命名为：script.js   （如修改，在页面引用文件也要与之相同） var TINY={}; function T$(i){return document.getElementById(i)} function T$$(e,p){return p.getElementsByTagName(e)} TINY.table=function(){ ...
JS表格排序
xianzehua的专栏
07-10 598
自定义表格排序(JS) (function($){ //插件 $.extend($,{ //命名空间 sortTable:{ sort:function(tableId,Idx){ var table = document.getElementById(tableId); var tbody = table.tBodies[0]; var tr = tbody.rows;
JavaScript sort() 方法实现升降排序(含ajax+表格升降序案例)
weixin_45200954的博客
03-26 988
javascript中sort的运用: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>排序</button> <h...
js对表格进行排序
dfc_xiaoke的博客
09-26 5532
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表格搜索&lt;/title&gt; &lt;/head&gt; &lt;script type="text/javascript"&gt; wi
JavaScript实现表格排序方法
10-27
JavaScript实现表格排序方法，需要的朋友可以参考一下
JavaScript实现表格点击排序的方法
12-07
这里实现基于JS的表格点击排序效果，可以根据表格内的数据大小自动按顺序排列，股票网站常会见到这种功能。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt...
js实现表格的排序功能
Edward的web前端修炼之路
09-06 7099
之前的阿里线上笔试最后一道就是实现表格的排序功能，但当时由于时间有限没能完成，于是今天趁着午休时间完成了这个功能。 下面附上代码（有注释）：（该功能是完成了对age的升序（从小到大）的排序） Document table { border: 1px solid #ccc; width: 1000px; margin: 20px auto; borde
HTML中数字降序排列怎么做,javascript实现表格升序降序排列(示例代码)
weixin_33359523的博客
06-18 982
TableSorterbody{font-size:12px;line-height:25px;}tr{height:25px;}th{font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;border:solid 1px;}td{font-size:12px;text-align:center;border...
js实现表格排序
程序员秋风的博客
03-31 4899
用js实现表格排序。 第一点击以降序排列，第二次点击以升序排列 html代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1"> <tr> <
js实现数组项升序、降序 方法（适用大部分数据类型）
泥猴桃的博客
12-08 4001
今天在书上看到两个方法，一个升序方法一个降序方法，记录下来供以后参考！javascript提供了两个相关方法 severse() 颠倒数组顺序； sort()升序排列数组项var arr = [1,5,2,10,15]; console.log(arr.sort()); //[1, 10, 15, 2, 5]但是sort()方法会根据测试字符串的结果改变顺序，因为数值5虽然小于10，但
js中的升降序的比较器
java_zhaoyanli的专栏
03-07 2084
var arr=[2,23,3,226,123,1,12]; //Step1:定义比较器函数 function compareASC(a,b){ return a-b; } //Step2:将函数作为参数传入sort方法 arr.sort(compareASC); console.log(String(arr)); //降序 //定义比较器 function c
Javascript对HTML表格排序-很实用
热门推荐
chunyuan314的博客
07-25 1万+
Javascript对HTML表格排序-很烂但实用 Javascript实现HTML表格排序，点击表头的标题单元格，即可对该列排序，升序降序切换，数字、文本都可以排序。 先看下面的效果图： 该功能已经封装成了一个Javascript函数，要实现表格排序的功能非常简单，只需： 引入包含该函数的js文件（需要预先引入jQuery）—— 这个不难 在需要排序的表格的标题单元格（th元素）的...
在Web页面中实现数据表格的排序功能(全部数据，非当前页)
RoxLiu的专栏
06-25 1万+
在数据分页以后，点击表头，希望数据能在后台排序（数据库order by排序），然后返回当前页。
左右可以转移的列表
xiexy的专栏
07-28 550
菜单快捷组function func_insert(){ for (i=0; i {   if(select2.options(i).selected)   {     option_text=select2.options(i).text;     option_value=select2.options(i).value;     option_style_color=select2.
js实现表格排序（正序和反序）
zunguitiancheng的专栏
06-26 5945
Untitled Document                               table{                 border:#249bdb 1px solid;                 width:500px;                 border-collapse:collapse;             }       
在本机浏览器中对表格数据进行排序
indexchen的专栏
12-04 2372
在Web应用中，数据从服务器端返回到客户端，以表格形式表现出来。如果要对数据集按指定的列排序显示，常规做法都是向服务器发出请求，服务器端程序重新从数据库中取出按指定列排序的数据，返回给客户端，页面重新显示排序后数据。 采用这种方式有如下缺点：1- 响应时间延迟，每次排序都要向服务器端发送请求，等待结果返回，同时增加网络负载。2- 编程复杂，可维护性差，而且客户端和服务器端代码耦合度很高，客户端和服
js 实现table表格拖拽和点击表头升降序排序
weixin_30709809的博客
08-24 436
js 实现table表格拖拽和点击表头升降序排序，写的比较乱，用的时候可以把其中的一些模块函数提取出来 样式，由于是可拖拽表格，所以样式 table tr th{cursor:move;} js实现 var arrTh = [];//保存初始每个th位置的数组 $('.Report th').each(function (i, e) { ...
javascript 实现表格排序
最新发布
02-06
要实现JavaScript表格排序，可以使用JavaScript的Array对象和DOM操作来实现。首先，可以通过document.getElementById()方法来获取要进行排序的表格元素，并且使用getElementsByTagName()方法来获取表格的行和列,然后存储在数组中，对这个数组进行排序。 其次，可以使用addEventListener()方法给表头的每个单元格加上点击事件，当用户点击表头单元格时触发排序函数。在排序函数中，可以使用数组的sort()方法对行进行排序，然后重新遍历表格并用新的顺序重组行，实现表格的重新排序。 另外，还可以在单元格上添加一些小箭头或其他标识，以显示当前排序的方向。通过点击表头单元格时切换排序方向，或者给每列添加一个升序/降序按钮。 最后，最好对排序函数进行抽象，提高可复用性，使得它可以应用到不同的表格中。这样在其他需要排序的表格，只需要调用这个函数即可实现表格排序。 总之，JavaScript实现表格排序就是通过利用数组和DOM操作，监听表头的点击事件，调用排序函数，重新排列表格的行，通过这种方式来实现表格的排序功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值