技术标签: js php排序表格
本文主要介绍了jQuery实现的表格前端排序功能,涉及jQuery针对表格元素的获取、遍历及事件响应相关操作技巧,需要的朋友可以参考下,希望能帮助帮到大家。
本文实例讲述了jQuery实现的表格前端排序功能。分享给大家供大家参考,具体如下:
表格前端按列排序
依赖jQuery(本例使用jQuery-1.8.2)
1.初始化方法
(function($){
//插件
$.extend($,{
//命名空间
sortTable:{
sort:function(tableId,Idx){
var table = document.getElementById(tableId);
var tbody = table.tBodies[0];
var tr = tbody.rows;
var trValue = new Array();
for (var i=0; i
trValue[i] = tr[i]; //将表格中各行的信息存储在新建的数组中
}
if (tbody.sortCol == Idx) {
trValue.reverse(); //如果该列已经进行排序过了,则直接对其反序排列
} else {
trValue.sort(function(tr1, tr2){
var value1 = tr1.cells[Idx].innerText; //列
var value2 = tr2.cells[Idx].innerText; //第二列
value1 = value1.replace("%",""); //把有%的取消掉
value1=value1.trim(); //去空格
console.log(typeof(value1));
if(isNaN(value1)){
var index1 = value1.indexOf("分");
var index2 = value2.indexOf("分");
if(index1>0){
var num1 =value1.substring(0,index1);
var num2 =value1.substring(index1+1,value1.length-1);
var num3 =value2.substring(0,index2);
var num4 =value2.substring(index2+1,value2.length-1);
if(parseFloat(num1)>parseFloat(num3)){
return 1;
}
if(parseFloat(num1)
return -1;
}
if(parseFloat(num1)==parseFloat(num3)){
return parseFloat(num2)-parseFloat(num4)
}
}else{
var a = tr1.cells[Idx].textContent;
var b= tr2.cells[Idx].textContent;
return a.localeCompare(b);
}
}else{
return parseFloat(value1)-parseFloat(value2);
}
});
}
var fragment = document.createDocumentFragment(); //新建一个代码片段,用于保存排序后的结果
//var index = 0;
var arrtotal =new Array();
for (var i=0; i
var c = trValue[i].cells[0].innerHTML;
//console.log(c);
if(c.trim().indexOf("汇总")!=-1){//汇总行总是排在表格最上面
// index = i;
arrtotal.push(i);
}else{
fragment.appendChild(trValue[i]);
}
}
if(arrtotal.length>0){
for(var k=arrtotal.length; k<0; k-- ){
tbody.appendChild(trValue[arrtotal[k]]);
}
}
//tbody.appendChild(trValue[index]);
tbody.appendChild(fragment); //将排序的结果替换掉之前的值
tbody.sortCol = Idx;
}
}
});
})(jQuery);
2.页面函数
function desc_change(id,str){
$("#desc_1").html("日期");
$("#desc_2").html("ID");
$("#desc_3").html("类别");
$("#"+id).html(str);
}
function desc(id,str){
var htmlstr =$("#"+id).text().trim();
var c =str;
if(htmlstr==str){
c=str+'↓';
$("#"+id).html(c);
}else if(htmlstr==str+'↓'){
c=str+'↑'
$("#"+id).html(c);
}else if(htmlstr==str+'↑'){
c=str+'↓'
$("#"+id).html(c);
}
desc_change(id,c)
}
3.DOM结构
201870601汇总新闻相关推荐:
文章浏览阅读103次。/* 排序 >号 从小到大排序 <从大到小排序 */ list.sort(function(a, b) { return a.date < b.date ? 1 : -1; })如果是简单的list就直接 return a < b ? 1 : -1;即可,如果是list里面套的map,可让list按map里面的指定字段进行排揎。..._sort a
文章浏览阅读375次。<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> <script type="text/javascript"> function checkName() { var name = document.getElementB..._jsp前端页面将表单是否提交成功作为限制条件
文章浏览阅读1k次。Sequence Numberlzyws7393074532892018-04-25Number Sequenceqq_391789932452017-09-21理解TCP序列号(Sequence Number)和确认号(Acknowledgment Number)hebbely9822017-01-14Number Sequence(规律)l25336363712902017-07-18Numb..._ack num
文章浏览阅读5.9k次。笔记本电脑怎么进CMOS密码巧设置笔记本电脑怎么进CMOS密码巧设置 笔记本电脑为了保护用户的数据安全,往往采用加密的方式,最常见的还是CMOS密码加密技术。为了让你的重要数据更加安全,你可能需要设置不同的密码,这也就要求你记住许多密码。对于笔记本电脑用户来说,真的需要设置一道道密码关卡吗?非也非也! 一、认识与设置笔记本电脑的CMOS密码 笔记本电脑的CMOS密码大致分为超级密码(Supervi..._电脑第一道密码修改
文章浏览阅读2.5k次,点赞2次,收藏5次。迟到的文章,就当库存发出来吧~_jangow01
文章浏览阅读1.7w次,点赞2次,收藏5次。默认情况下RDD的transformation是lazy形式,实际计算只有在ation时才会进行,而且rdd的计算结果默认都是临时的,用过即丢弃,每个action都会触发整个DAG的从头开始计算,因此在迭代计算时都会想到用cache或persist进结果进行缓存。敝人看到很多资料或书籍有的说是persist或cache会触发transformation真正执行计算,有的说是不会!敝人亲自实验了一把..._spark cache和persist不生效
文章浏览阅读637次。树莓派的GPIO操作被抽象为文件读写,下面以一个例子来说明GPIO操作。_树莓派怎么读取gpio口上的信息
文章浏览阅读1.7k次。QNX是一种商用的遵从POSIX规范的类Unix实时操作系统,目标市场主要是面向嵌入式系统。它可能是最成功的微内核操作系统之一。QNX是一种商用的类Unix实时操作系统,遵从POSⅨ规范,目标市场主要是嵌入式系统[1]。QNX成立于1980年,是加拿大一家知名的嵌入式系统开发商。QNX的应用范围极广,包含了:控制保时捷跑车的音乐和媒体功能、核电站和美国陆军无人驾驶Crusher坦克的控制系统[2],还有RIM公司的BlackBerry PlayBook平板电脑。_车机qnx虚拟化软件系统架构
文章浏览阅读1k次,点赞20次,收藏22次。代码功能:信号发生器设计信号发生器由波形选择开关控制波形的输出,分别能输出正弦波、方汉和三角波三种波形,波形的周期为2秒(由40M有源晶振分频控制)。考虑程序的容量,每种波形在一个周期内均取16个取样点,每个样点数据是8位(数值范围:00000000~1111111)要求将D/A变换前的8位二进数据(以十进制方式)输出到数码管动态演示出来。_vhdl正弦波信号发生器
文章浏览阅读629次。Java Concurrency in Practice中对线程安全的定义:当多个线程访问一个类时,如果不用考虑这些线程在运行时环境下的调度和交替运行,并且不需要额外的同步及在调用方代码不必做其他的协调,这个类的行为仍然是正确的,那么这个类就是线程安全的。显然只有资源竞争时才会导致线程不安全,因此无状态对象永远是线程安全的 。过多的同步会产生死锁的问题,死锁属于程序运行的时_java 线程概述
文章浏览阅读1.2w次,点赞10次,收藏61次。读取表单Sheet2中部分信息。_matlab读取数据
文章浏览阅读1.4w次。最近项目中用到ItemBased Collaborative Filtering,实践过spark mllib中的ALS,但是因为其中涉及到降维操作,大数据量的计算实在不能恭维。所以自己实践实现基于spark的分布式cf,已经做了部分优化。目测运行效率还不错。以下代码package modelimport org.apache.spark.broadcast.Broadcastimp_spark cf