排序列表

最新推荐文章于 2022-06-17 21:03:53 发布
最新推荐文章于 2022-06-17 21:03:53 发布
阅读量352 收藏
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stone10086/article/details/70680859
版权

要求：1点击列头，可进行该列排序
2可进行升序和降序牌列的更换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排序</title>
    <style>
        thead th{
            position: relative;
        }

        .onclick-asc:after{
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            border-left: 3px solid #999;
            border-bottom: 3px solid #999;
            transform: rotate(-45deg);
            position: absolute;
            top: 4px;
            right: 18px;
        }
        .onclick-desc:after{
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            border-left: 3px solid #999;
            border-bottom: 3px solid #999;
            transform: rotate(135deg);
            position: absolute;
            top: 8px;
            right: 18px;
        }
    </style>
</head>
<body>
    <table align="center" border="1" cellspacing="0" cellpadding="0" width="800">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>语文</th>
                    <th>数学</th>
                    <th>英语</th>
                    <th>总分</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>100</td>
                    <td>100</td>
                    <td>100</td>
                    <td>300</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>98</td>
                    <td>82</td>
                    <td>90</td>
                    <td>270</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>100</td>
                    <td>70</td>
                    <td>95</td>
                    <td>265</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵里</td>
                    <td>100</td>
                    <td>100</td>
                    <td>90</td>
                    <td>290</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>柳次</td>
                    <td>100</td>
                    <td>80</td>
                    <td>100</td>
                    <td>280</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>李希</td>
                    <td>85</td>
                    <td>85</td>
                    <td>85</td>
                    <td>255</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>陈久</td>
                    <td>95</td>
                    <td>95</td>
                    <td>95</td>
                    <td>285</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>Andy</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>282</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>Simon</td>
                    <td>80</td>
                    <td>80</td>
                    <td>80</td>
                    <td>240</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>Lilly</td>
                    <td>100</td>
                    <td>70</td>
                    <td>75</td>
                    <td>245</td>
                </tr>
            </tbody>
        </table>
</body>
<script>

    (function(){
        var oTd=document.querySelector('table').tHead.rows[0].children;
        var status='asc';
        for(var i = 0, length1 = oTd.length; i < length1; i++){
            var none;
            (function(j){
                oTd[i].style.cursor='pointer';

                oTd[j].onclick=function(){
                    status = status=='asc'?'desc':'asc';
                    for(var i= 0, length =oTd.length; i < length; i++){
                        oTd[i].className='';
                    };
                    if (status=='asc') {
                        status=='desc';
                        this.className='onclick-asc';
                    }else{
                        this.className='onclick-desc';
                    }
                    sort(j,status);
                };

            })(i);
        };
    })();
    function sort(index,status){
        var oTb1=document.querySelector('table');
        var ary=[];
        for(var i = 0, length1 = oTb1.tBodies[0].rows.length; i < length1; i++){
            ary.push(oTb1.tBodies[0].rows[i]);
        };
        ary.sort(function(o1,o2){
            var val1=o1.children[index].innerHTML;
            var val2=o2.children[index].innerHTML;
            if(index==1){
                var length=val1.length<val2.length?val1.length:val2.length;
                for(var i = 0; i < length; i++){
                    if(val1[i]=val2[i]){
                        continue;
                    }else{
                        if (status=='asc') {
                            return val2[i]>val1[i]?1:-1;
                        }else{
                            return val1[i]>val2[i]?1:-1;
                        };
                    };

                };
                return status=='asc'?val2.length-val1.length:val1.length-val2.length;
            };
            return status=='asc'? val2-val1:val1-val2;

        });
        for(var i = 0, length1 = ary.length; i < length1; i++){
            oTb1.tBodies[0].appendChild(ary[i]) ;
        };
    }
</script>   
</html>

效果图：

这里写图片描述

石界星空
关注
专栏目录
Python 排序列表——如何按降序或升序排序
m0_64355682的博客
03-29 3万+
在 Python 中，你可以使用sorted()方法或sort()方法对数据进行排序。 在本文中，我将提供sorted()和sort()方法的代码示例，并解释两者之间的区别。 Python 排序列表——如何按降序或升序排序 在 Python 中，你可以使用sorted()方法或sort()方法对数据进行排序。 在本文中，我将提供sorted()和sort()方法的代码示例，并解释两者之间的区别。 sort()方法是什么 此方法接受一个列表并对其进行排序。但，请记住...
python列表数据排序_Python中，如何将列表中数据排序给列表排序？
weixin_39624360的博客
12-04 3273
在程序中使用字典进行数据信息統计时由于字典是无序的所以打印字典时内容也是无序的。因此为了使统计得到的结果更方便查看需要进行排序。Python中字典的排序分为按“键”排序和按“值”排序那么python如何将列表中数据排序对字典排序呢？一起来了解下吧：实际应用中我们确实有这种排序的“需求”-----按照values的值“排序”输出或者按照别的奇怪的顺序进行输出，我们只需要把字典转化成list或者tup...
java 列表组件_可排序的组件列表
weixin_36484714的博客
02-24 114
首先，将每个汽车组件的数据存储在父组件的数据属性中：data: function () {return {cars: [{ code: '11A', prize: 5.00, description: 'Ford Ka' },{ code: '11B', prize: 3.00, description: 'Kia ceed' },{ code: '11C', prize: 6.00, descr...
【Unity3D数据集合】（七）排序列表SortedList和排序字典SortedDictionary学习
CSDN博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
08-11 4255
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群：1040082875 大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。 一、前言 在日常开发中，常常会用到数据集合，那么数据集合是什么呢，数据集合也没有想象中那么复杂。 数据集合就是专门用来存储数据、检索数据，以及对数据一系列操作的类。 这些类有：ArrayList数组、List列表、Queue队列、Dictionary字典、Hashtable哈希表、S.
Android 按照首字母排序列表A-Z
森森先生的博客
10-18 2576
按照首字母排序列表常用于手机联系人，或者商品展示
微信小程序拖拽排序列表
一出好剧
01-15 3014
拖拽排序列表 思路 界面分为两层： 底层，正常列表展示，拖拽的时候不做处理（大牛直接加了动画，原谅我技艺不精，还没实现） 顶层，movable-view组件，不长按不展示，之后长按才展示，且没有点击事件。 事件 主要监听：longpress , touchmove , touchend 三个事件 longpress 保障长按才有效，并设定许多其他值。 touchmove 滑动的时候触发 判断...
列表排序（Python）
TCatTime的博客
06-09 1577
Python面试题目《列表排序》解决方案。
两个排序列表的相似性计算
u014629974的专栏
06-30 1955
1. 肯德尔等级相关系数（Kendall Tau） 我们可以用逆序对数量来量化两个排序列表的不一致程度。 2. Spearman's Footrule Spearman's Footrule是两个排序列表之间的绝对距离，类似于文本编辑距离，度量把一个列表修改为另一个列表最少需要移动各个元素的距离的总和。 ...
列表的排序
m0_63758151的博客
06-17 2008
排序方式
java对列表排序_如何在Java中对列表进行排序
weixin_39791446的博客
02-27 1615
列表可以使用java.util.Collections.sort()方法以升序排序。此方法需要单个参数，即要排序的列表，并且不返回任何值。如果列表中存在相互不可比较的元素，则Collections.sort()方法将引发ClassCastException。演示此的程序如下所示-示例importjava.util.ArrayList;importjava.util.Collections;im...
微信小程序拖拽排序列表的示例代码
10-15
微信小程序拖拽排序列表是一种常见的交互功能，允许用户通过触摸屏幕拖动列表项来改变它们的顺序。在本文中，我们将深入探讨如何实现这一功能，包括思路、关键事件监听以及示例代码。 **拖拽排序列表思路** 1. **...
react-sortable：使用React构建的可排序列表组件
02-20
用于创建具有最低实现要求且无polyfill的可排序列表的高阶组件。 仅使用React.js和HTML5 接口。 主要在最新的稳定Webkit，Firefox和IE中进行了测试。 查看和。 安装 要安装稳定版本，请使用： npm i react-...
C#实现windows窗体应用程序（哈希表和排序列表的使用）
11-16
输入：多位同学的成绩（名字/成绩（key/value））。输出：平均成绩、最高成绩等。根据用户输入的姓名输出该...（由哈希表、泛型排序列表等多种方式来实现）。 在windows窗体中进行输入和输出，输入出错时会给出提示。
排序列表 android studio 版本 实现了类似与通讯录的效果， 可以多选，如图：
11-20
排序列表 android studio 版本 实现了类似与通讯录的效果， 可以多选，如图：排序列表 android studio 版本 实现了类似与通讯录的效果， 可以多选，如图：排序列表 android studio 版本 实现了类似与通讯录的效果...
JS 调用函数内部的函数(可以这样的理解：通过一个函数可以调用另一个函数的内部函数)
热门推荐
stone10086的博客
12-22 1万+
可用两种方法实现：1、实例化函数为对象；2、闭包返回内部值。 一、实例化函数为对象 /* * 创建函数--面向对象 */ var objfn = function() { this.a = function(arg){console.log(arg);} this.b = function(arg){console.log(arg+1);} } /*创建实例*/ var fn = n...
js递归遍历json所有数据
stone10086的博客
07-09 1万+
//递归遍历json所有数据 function getAllJson(jsons, name, sign) { if(name == "" || name == undefined) { name = "json" } for(key in jsons) { var k = name + sign + key; if(!...
js中文按首字母排序
stone10086的博客
11-05 1万+
var array = ['武汉', '北京', '上海', '天津','','am','pam','1213','123']; var resultArray = array.sort( function compareFunction(param1, param2) { return param1.localeCompare(param2,"zh"); } );...
用 js 实现随机选取 10–100 之间的 10 个数字，存入一个数组，并排序
stone10086的博客
07-29 7257
var iArray = []; funtion getRandom(istart, iend){ var iChoice = istart - iend +1; return Math.floor(Math.random() * iChoice + istart; } /*Math.random()就是获取 0-1 之间的随机数（永远获取不到 1）*/ for(var i=0; i<10; i+
file 上传图片并获取图片路径
stone10086的博客
05-21 6353
function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { url = window.createObjectURL(file) } else if (window.URL != undefined) { url = windo...
冒泡排序列表python
最新发布
05-17
冒泡排序是一种简单的排序算法，它的基本思想是重复地遍历要排序的列表，一次比较两个元素，如果它们的顺序错误就把它们交换过来。这个过程一直持续到列表中的所有元素都排好序为止。以下是冒泡排序的Python实现： ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值