javascript-表格排序(降序/反序)实现介绍(附图)

2024-03-23 01:24:00

知识点：

Array方法：

sort:降序

reverse:反序

效果：

代码：

代码如下:

for(var i=0,len=tablePart.rows.length;i<len;i++){
var td=tablePart.rows[i].cells[col];
var num=fun(td);
arrNum.push(num);
trs["id"+num]=trs["id"+num]||[];
trs["id"+num].push(getParentTr(td));
}
arrNum=arrSort(arrNum,isDesc);
for(var j=0,jlen=arrNum.length;j<jlen;j++){
for(var k=0,klen=trs["id"+arrNum[j]].length;k<klen;k++){
var tr=trs["id"+arrNum[j]].pop();
tablePart.appendChild(tr);
}
}
}

var table=document.getElementById("tableSort");
var checkBoxs=table.tBodies[0].getElementsByTagName('input');
var checkAll=document.getElementById("checkAll");
var reserveCheck=document.getElementById("reserveCheck");
var delSelect=document.getElementById("delSelect");
var timeSort=document.getElementById("timeSort");
var priceSort=document.getElementById("priceSort");

checkAll.onclick=function(){
setChecked(checkBoxs,this.checked);
}

reserveCheck.onclick=function(){
reverseChecked(checkBoxs);
}
table.tBodies[0].onclick=function(e){
var ev=e||window.event;
var target=ev.target||ev.srcElement;
if(!target)return;
target._op=target.getAttribute("_op");
if(!target._op)return;

if(target._op==="check"&&target.type==="checkbox"&&!target.checked){
checkAll.checked=target.checked;
}
if(target._op==="del"){
var tr=getParentTr(target);
removeTr(table.tBodies[0],tr);
}
}
delSelect.onclick=function(){
var chk=[];
for(var i=0,len=checkBoxs.length;i<len;i++){
if(checkBoxs[i].checked){
var tr=getParentTr(checkBoxs[i]);
chk.push(tr);
}
}

for(var j=0,jlen=chk.length;j<jlen;j++){
removeTr(table.tBodies[0],chk[j]);
}
}
var sortMark="↑↓";
timeSort.onclick=function(){
this.isDesc=(this.isDesc===true)?false:true;
tableSort(table.tBodies[0],3,function(td){
return (new Date(td.innerHTML)).getTime();
},this.isDesc);
priceSort.innerHTML="价格"
this.innerHTML="上架时间"+sortMark[this.isDesc?1:0];
}
priceSort.onclick=function(){
this.isDesc=(this.isDesc===true)?false:true;
tableSort(table.tBodies[0],4,function(td){
return parseInt(td.innerHTML.replace("￥",''));
},this.isDesc);
timeSort.innerHTML="上架时间";
this.innerHTML="价格"+sortMark[this.isDesc?1:0];
}

</script>

总结：

完成了基本功能，对于联合排序没有实现。后期会慢慢加入，有兴趣的可以把代码放到html页面，运行查看效果。

js对数组中的数字从小到大排序实现代码

例子 1 In this example we will create an array and sort it alphabetically: var arr = new Array(6) arr[0] = "Jani" arr[1] = "Hege" arr[2] = "Stale" arr[3] = "Kai Jim" arr[4] = "Borge" arr[5] = "Tove"
JavaScript实现数字数组正序排列的方法

本文实例讲述了JavaScript实现数字数组正序排列的方法.分享给大家供大家参考.具体如下: JS数组的sort方法支持一个函数作为参数,下面的代码演示了JS数组如何实现数字的正序排列 <!DOCTYPE html> <html> <body> <p id="demo">Click the button to sort the array.</p> <button onclick="myFunction()&
JS实现的数组全排列输出算法

本文实例讲述了JS实现的数组全排列输出算法.分享给大家供大家参考.具体分析如下: 这段js代码对数组进行全排列输出,改进了一些老的代码从n个不同元素中任取m(m≤n)个元素,按照一定的顺序排列起来,叫做从n个不同元素中取出m个元素的一个排列.当m=n时所有的排列情况叫全排列. function permute(input) { var permArr = [], usedChars = []; function main(input){ var i, ch; for (i = 0; i < i
js中数组(Array)的排序(sort)注意事项说明

直接看代码吧,测试结果也贴在里面了复制代码代码如下: var arrDemo = new Array(); arrDemo[0] = 10; arrDemo[1] = 50; arrDemo[2] = 51; arrDemo[3] = 100; arrDemo.sort(); //调用sort方法后,数组本身会被改变,即影响原数组 alert(arrDemo);//10,100,50,51 默认情况下sort方法是按ascii字母顺序排序的,而非我们认为是按数字大小排序 arrDemo.so
JS实现数组按升序及降序排列的方法

本文实例讲述了JS实现数组按升序及降序排列的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数组数字大小排序</title> </head> <body> <p>让数组按照升序降序排列</p> <p>这里写
js中数组排序sort方法的原理分析

本文实例分析了js中数组排序sort方法的原理.分享给大家供大家参考.具体分析如下: 最近在百度的项目中要用到对数组进行排序,当然一开始自然想到了数组的sort方法,这方法应用非常简单,大致如下: 复制代码代码如下: window.onload=function(){ var arr=[2,55,55,1,75,3,9,35,70,166,432,678,32,98]; var arr2=["George","John","
Javascript数组的排序 sort()方法和reverse()方法

其中: 1.JavaScript的sort()中如果没有指定比较函数,则默认会按照字符的编码顺序进行升序排序.也就是说如果我们想要对数值进行排序得到的不一定是我们想要的结果. 2.Javascript的reverse()将数组中的元素逆序. 先看看上面的第一点,如果有一个数组arr=[1,6,3,7,9],使用arr.sort()后,数组的顺序为1,3,6,7,9,得到了我们想要的结果. 再看看下面的一个数组排序:arr=[3,1,16,34,30],如果执行arr.sort()后是不是还是会得
JavaScript数组随机排列实现随机洗牌功能

本文实例讲述了JavaScript数组随机排列实现随机洗牌功能的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以对数组内的元素进行随机排列,这个非常有用,比如我们在玩扑克牌的时候可以让扑克牌进行排列,也就是电脑洗牌. var list = [1,2,3,4,5,6,7,8,9]; list = list.sort(function() Math.random() - 0.5); Print(list); // prints something like: 4,3,1,2,9,5,6,
JavaScript实现在数组中查找不同顺序排列的字符串

需求描述:从一组数组中找出一组按不同顺序排列的字符串的数组元素.假如有这样一个数组: 复制代码代码如下: [ 'abcd', 'hello', 'bdca', 'olleh', 'cadb', 'nba', 'abn', 'abc' ] 需要找出的结果是: 复制代码代码如下: [ 'abcd', 'bdca', 'cadb' ] 那么这里的关键点是判断一组字符串是否是否只是字符的顺序不同,只要解决整个关键点其他都好办了. 方法1: 复制代码代码如下: var stringClassify
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block;margin:0 auto 10px;height:24px;line-height: 24px;width:200px;} .content ul li{text-align: center;} .content ul li span{display: inline-
详解js数组的完全随机排列算法

Array.prototype.sort 方法被许多 JavaScript 程序员误用来随机排列数组.最近做的前端星计划挑战项目中,一道实现 blackjack 游戏的问题,就发现很多同学使用了 Array.prototype.sort 来洗牌. 洗牌以下就是常见的完全错误的随机排列算法: function shuffle(arr){ return arr.sort(function(){ return Math.random() - 0.5; }); } 以上代码看似巧妙利用了 Array.
JavaScript实现数字数组按照倒序排列的方法

本文实例讲述了JavaScript实现数字数组按照倒序排列的方法.分享给大家供大家参考.具体如下: 下面的代码演示了JS数组如何通过sort对数字类型的数组进行倒序排序 <!DOCTYPE html> <html> <body> <p id="demo"> Click the button to sort the array. </p> <button onclick="myFunction()"&g
js sort 二维数组排序的用法小结

最近在搞js 排序的问题,因为数据库排序太耗资源,如果能转移到客户端去排序,能大大D减少服务器内存消耗.客户端的话,除了js,就是as了,可惜我as学得太烂,所以只能选择js来研究研究了...经过我的测试,js内置方法sort的效率非常高我们知道在js中默认提供了sort函数,但是这个函数默认是按照数组内容的ascii码升序进行排列的,如果我们要对二维数组排序要如何做呢?在php中是有multi_sort函数可供调用的,但是在js中似乎没有这种函数,但是没关系 ,因为js的sort函数其实也提

javascript-表格排序(降序/反序)实现介绍(附图)

相关推荐

随机推荐