js表格根据某一列排序

嗯哼，直接上代码~

<!DOCTYPE HTML>
<html><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1">    <title>升序降序练习</title><!-- Bootstrap --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--><style type="text/css"> table{ width:500px; height:500px; border:#400040 solid 2px; border-collapse:collapse; } table td,th{ border:solid 2px; } table th{ background-color:#c0c0c0; } </style></head><body><button class="descendingOrder">降序</button><button class="ascendingOrder">升序</button><table id="tableId"> <thead><tr><th>姓名</th> <th>年龄</th> <th>出生地</th> </tr></thead><tbody><tr class='c1'> <td>张三</td> <td><input type="text" name=""></td> <td>湖南长沙</td> </tr> <tr class='c2'> <td>李四</td> <td><input type="text" name=""></td> <td>湖南常德</td> </tr> <tr class='c3'> <td>王五</td> <td><input type="text" name=""></td> <td>湖南临澧</td> </tr> <tr class='c4'> <td>赵六</td> <td><input type="text" name=""></td> <td>浙江杭州</td> </tr> </tbody></table>       <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><script type="text/javascript">// 将字符串转化为数字var numFormat = function(val){return $.trim(val) === '' ? 0 : parseFloat(val);};/*** table根据某一列进行排序（js），table格式（<table><thead><tr><td></td></tr></thead><tbody><tr><td></td></tr></tbody></table>）* $table: table元素* columnNum: 按第几列进行排序* isAscending: 是否正序排列（默认为false降序排列，否则为true升序排列）*/            var sortByColumn = function($table, columnNum, isAscending){var tableRows = $table.find('tbody tr'); var returnArr = tableRows;var length = returnArr.length;columnNum = columnNum - 1;  if (isAscending) {// 升序排列for (var x = 0; x < length; x++) {for (var y = x + 1; y < length; y++) {var current = tableRows.eq(x).find('td').eq(columnNum).children().val();var latter = tableRows.eq(y).find('td').eq(columnNum).children().val();if (numFormat(current) > numFormat(latter)) { var temp = returnArr[x]; returnArr[x] = returnArr[y]; returnArr[y] = temp;}}  }} else {// 降序排列for (var x = length-1; x >= 0; x--) {for (var y = x - 1; y >= 0; y--) {var current = tableRows.eq(x).find('td').eq(columnNum).children().val();var latter = tableRows.eq(y).find('td').eq(columnNum).children().val();if (numFormat(current) > numFormat(latter)) { var temp = returnArr[x]; returnArr[x] = returnArr[y]; returnArr[y] = temp;}}  }} // 最后正常输出for (var x = 0; x < length; x++) {returnArr[x].parentNode.appendChild(returnArr[x]); }               };// 降序$('.descendingOrder').on('click', function(){var table = $('#tableId');sortByColumn($('#tableId'), 2);});// 升序$('.ascendingOrder').on('click', function(){var table = $('#tableId');sortByColumn($('#tableId'), 2, true);});</script></body>
</html>

js表格根据某一列排序相关推荐

java excel 多列排序,《excel表格调取行和列的数据》 excel列排序的时候怎么让所有行的信息跟着排（其它的非数据行）...
Java里面怎么调用excel表格中的x行第y列的数据,将其赋值到int型变量i InputStream inp = new FileInputStream("workbook.xls&qu ...
html table 筛选记录,JS实现table表格内针对某列内容进行即时搜索筛选功能
JS实现table表格内针对某列内容进行即时搜索筛选功能发布时间:2020-08-29 09:26:37 来源:脚本之家阅读:103 作者:Marx-link 本文实例讲述了JS实现table表格 ...
Excel 表格实现多列排序
Excel 表格实现多列排序 1.原始数据 2.需要实现按照表主键有效日期创建日期三列进行升序排列数据->排序-> 添加条件->选择列名点击确定 3.排序后的结果 ...
element-ui表格列排序错乱问题解决方案
文章目录一.基本代码二.问题三.解决方案一.基本代码在使用el-talble的时候可以加上sortable属性,使表格中的某一列具备排序的功能,点击表格title右侧的三角符号可以切换正序和 ...
QRowTable表格控件-支持hover整行、checked整行、指定列排序等
文章目录一.开心一刻二.嘴一嘴三.效果展示四.浅谈实现五.自定义数据源 1.data函数 2.flags函数六.自定义视图 1.目的 2.问题分析七.测试八.相关文章原文链接: QR ...
js中在表格中增加一列的方法_Excel表格中需要提取一列内容末尾的数字，同事分分钟完成...
[温馨提示]亲爱的朋友,阅读之前请您点击[关注],您的支持将是我最大的动力! 日常工作中,经常会收到老板发来的不规则表格,是表格内容不规则: 如下图,让把数字单独一列,以便进行汇总计算. 方法一:快捷 ...
java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...
总览: 一. GridManager.js表格插件直接上插件API:链接地址感觉该插件简单好用,插件作者也是有问必答,nice 二. 添加依赖后端: pom文件添加: 1.7.0.RELEASE ...
datatable.js 服务端分页+fixColumns列固定
前言记得还是15年的时候,工作需要,独自写后台管理系统..记得那时候,最让我头疼的不是后台逻辑,而是数据的列表展示. 列很多的时候,页面显示问题;分页样式问题;表格样式问题;数据加载...很多细节的 ...
php表格最后一行跨列合并,php动态实现表格跨行跨列实现代码
php动态实现表格跨行跨列实现代码发布于 2015-01-28 14:56:14 | 203 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext P ...

js表格根据某一列排序

js表格根据某一列排序相关推荐

最新文章

热门文章