表格排序和加升符、降符

最新推荐文章于 2025-04-16 16:19:33 发布
原创 最新推荐文章于 2025-04-16 16:19:33 发布 · 523 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table{border:1px solid black; width: 500px;border-collapse: collapse; }
            tr td{border:1px solid black;}
            td{position: relative;}
            .up:after,.down:after{
                    content: "";
                    width: 0;
                    height: 0;
                    border-width:  5px;
                    border-style: solid;
                    position: absolute;
                    right: 5px;
            }

            .up:after{
                    border-color: transparent transparent #f00 transparent;
                    top: 2px;
            }

            .down:after{
                    border-color:  #f00 transparent transparent transparent;
                    top: 8px;
            }
        </style>
    </head>
    <body>
        <table id="tb1">
            <thead align="center" <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>语文</td>
                <td>数学</td>
                <td>总分</td>
                <td>操作</td>
                </tr>
            </thead>
            <tbody align="center">
                <tr>
                    <td>7</td>
                    <td>Alexander</td>
                    <td>90</td>
                    <td>96</td>
                    <td>186</td>
                    <td></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>小明明</td>
                    <td>100</td>
                    <td>100</td>
                    <td>200</td>
                    <td></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>张三</td>
                    <td>90</td>
                    <td>60</td>
                    <td>150</td>
                    <td></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>李四</td>
                    <td>59</td>
                    <td>80</td>
                    <td>139</td>
                    <td></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>王五</td>
                    <td>80</td>
                    <td>85</td>
                    <td>165</td>
                    <td></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>小明</td>
                    <td>56</td>
                    <td>40</td>
                    <td>96</td>
                    <td></td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Victor</td>
                    <td>78</td>
                    <td>88</td>
                    <td>166</td>
                    <td></td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>Amanda</td>
                    <td>96</td>
                    <td>99</td>
                    <td>195</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </body>
    <script>
    //点击排序
    (function(){
        var oTds = document.getElementById('tb1').tHead.rows[0].children;
        for(var i=0;i<oTds.length-1;i++){
            (function(j){
                oTds[j].style.cursor = 'pointer';
                var status = 'asc';
                oTds[j].onclick = function(){
                    if(status =='asc'){
                        oTds[j].className='up';
                        status = 'desc';
                    }else{
                        oTds[j].className='down';
                        status = 'asc';
                    }
                    // status = status=='asc'?'desc':'asc';
                    sort(j,status);
                };
            })(i);
        }
    })()
    //给表格进行排序
    function sort(index, status){
        var tb1 = document.getElementById('tb1');
        var ary = [];
        for(var i=0;i<tb1.tBodies[0].rows.length;i++){
            ary.push(tb1.tBodies[0].rows[i]);
        }
        ary.sort(function(o1,o2){
            var val1 = o1.children[index].innerHTML;
            var val2 = o2.children[index].innerHTML;

            if(index==1){//对姓名排序
                return status=='desc' ? val1.localeCompare(val2) : val2.localeCompare(val1); 
            }
            //对数字排序
            return status=='desc' ? val2 - val1 : val1 - val2;
        });
        for (var i=0;i<ary.length;i++){
            tb1.tBodies[0].appendChild(ary[i]);
        }
    }
    </script>
</html>
合并的表格怎么加横线_word
weixin_39625586的博客
12-20 2592
如何设置word表格边框双横线如何设置word表格边框双横线 为了word中表格的美观,我们会对其进行一些修饰,那么如何设置表格边框双横线呢? 首先,打开一个word文档,插入所需要的表格. 选中表格,右键选择边框与底纹,在边框中选择双横线即可....其他2017/04/25Word表格中怎么加一条横线?Word表格中怎么加一条横线? 有时候要用word做一个表格或者一份协议书,都需要画下划线,打...
c语言输入格式控制符大全,c语言格式控制符
weixin_31822733的博客
05-17 8270
http://zhidao.baidu.com/link?url=-YJjz3U0fd_eSW9eLa8ankGo_QbyOOOaKYWyAY9g4mKWQj0DN6l12OSLJz24U8jCwo18MiBCzwpkFLoDM02yv_printf的格式控制的完整格式：% - 0 m.n l或h 格式字符下面对组成格式说明的各项加以说明：①%：表示格式说明...
html表格怎么设置上升下降,excel表格中怎么设置上涨、下降的箭头?
weixin_33826897的博客
06-18 621
两幅图，是一组索赔同比、环比数据，第三、四行分别是每个月的索赔同比、环比情况：图二明显要比图一的效果更直观吧？如何去实现这样的效果呢，是本人要讲的内容。1、选中B4:K4,B5:K5单元格区域，按Ctrl+1(或鼠标右键选择)，弹出【设置单元格格式】对话框。2、在【数字】选项卡下单击【自定义】，在格式框中输入以下格式代码：[蓝色]↑0.0;[红色]↓0.0;0.03、OK，完成了，就这么简单。、说...
element表格排序（带有数值、字符串）解决排序错乱
honeymoon_的博客
11-23 4576
问题描述 element表格中的数据有两种形式：数值、字符串。element自带排序方法会发生排序错乱。如图：没有金额时，展示 --，图中升序排序错乱。 解决步骤 1. 在el-tabel中添加 @sort-change="handleSort" <el-table :data="tableData" class="my-table" @sort-change="handleSort" > </el-table> 2. methods中添加方法 方法中de
word论文常用格式设定技巧【公式对齐、制表符公式编号等】
丨汀、的博客
08-17 9561
1.公式对齐 改动前： 改动后结果： 2.段落行距要求 对于文字可以设定为1.5倍行距 对于公式 5号字体对应1.5倍行距大概在23.4磅，因此可以根据需求适当调整大小。 3.公式标号---使用制表符 1)创建一个样式： 2)选择制表符 3）设置如下：公式居中对齐，标号右对齐 4）这个值的由来：也就是根据word实际页面大小设定的 5）使用方法就是选中公式，然后点击制作好的样式；分别在公式...
Element Plus 表格拖拽排序方案
html网页设计、web前后端网站制作、大学生网页设计作业、jQuery网站设计、uniapp小程序、vue网站设计、网页成品模板、期末大作业，各种源码应有尽有，持续更新中...
04-16 1424
​​优先选 el-table​​：若项目已稳定使用 Element Plus，且拖拽需求简单，通过 Sortable.js 实现更轻量。​​优先选 Vxe Table​​：若项目允许引入新组件库，或需要行列拖拽、树形拖拽等高级功能，Vxe 的开发效率更高。​​数据唯一性​​：确保row-key或useKey配置唯一标识​​样式优化​​：通过 CSS 调整拖拽占位符（如​​异步提交​​：拖拽完成后可调用接口更新后端数据。
js实现表格操作-排序
wuqiuyude的专栏
04-07 2382
用js实现表格操作，点击th，则根据该th所属列的数据排序，点击一次降序，第二次点击升序。表格代码：<table> <thead> <tr> <th>姓名</th> <th>力量</th> <th>敏捷</th> <th>实力</th> </tr> </thead> <tbody> <tr> <t
excel中批量插入分页符
qq_20941571的专栏
03-28 2271
excel、批量插入分页符
layui表格添加千分位排序
BookstoreSpirit的博客
12-17 1467
在项目开发中，有时会使用到表格，我们可以使用ui库提供的表格组件，来实现相关功能，我这里使用的是layui中的数据表格: <table class="layui-hide" id="test"></table> layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test', data: userData, cellMin.
JQuery插件实现表格排序
03-24
以上是基于“JQuery插件实现表格排序”的主要技术点，具体实现可能还需要结合实际的代码示例和博客中的详细步骤。在实际学习过程中，建议参考该博客或其他相关的教程，通过动手实践来加深理解和掌握这些知识点。
javascript 表格内容排序 简单操作示例代码
10-26
这为实现复杂表格的多重属性排序提供了可能，比如首先根据某个字段进行主要排序，然后根据另一个字段进行次要排序。 ### 知识点六：JavaScript的toLocaleString方法 `toLocaleString` 方法用于将数字转换为本地...
jQuery动态表格数据分页检索排序代码
04-08
这个项目“jQuery动态表格数据分页检索排序代码”提供了一个纯前端实现的解决方案，无需服务器端的支持，使得用户可以更加便捷地浏览和管理大量数据。 jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理...
《Excel-电子表格制作案例教程》商品促销折算表(调整分页符).xlsx
最新发布
06-28
在制作电子表格过程中，为了打印或者屏幕查看的方便，常常需要对分页符进行调整，确保表格在不同的页面中能够正确分页，避免打印输出时出现表格内容被错误分隔的情况。 4. 数据的排序与筛选。在促销活动中，可能...
excel表格中将一列含有字母和数字的信息,按数字排序.pdf
02-27
在Excel表格中，有时我们需要对混合了字母和数字的数据列进行排序，特别是在处理数据库或统计数据时这种情况很常见。本教程将指导你如何按照数字部分进行升序排序，即使这些数值混合在字母中。 首先，我们需要将...
JS的三种输出方式
热门推荐
sweetllh的博客
04-15 6万+
1.window.alert(”)，弹框效果，window可省略。弹出比较突然，用户的体验不好，基本用来测试代码使用。<script type="text/javascript"> /* * window.alert() 把小括号里的内容，以弹窗的方式显示出来 * window是BOM对象，指的是整个浏览器，可以省略不写 * '我是李康达，我为GDP代言'
编写一个js函数用来求n的阶乘
sweetllh的博客
07-01 2万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //求阶乘n! 即，1×2×3×4×5×······×n（使用递归
表格插件汇总
sweetllh的博客
02-03 1万+
常用表格插件附官网或中文网： Datatables、EasyUI Datagrid 数据网格、pqgrid、jqGrid、bootstrap-table 一、Datatables 中文网：http://www.datatables.club/ Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 增删改查功能完整： 1、
JS常用正则表达式和JS控制输入框输入限制(数字、汉字、字符)
sweetllh的博客
06-04 1万+
验证数字：^[0-9]*$ 验证n位的数字：^\d{n}$ 验证至少n位数字：^\d{n,}$ 验证m-n位的数字：^\d{m,n}$ 验证零和非零开头的数字：^(0|[1-9][0-9]*)$ 验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$ 验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$ 验证非零的正整数：^\+?[1-9][0-9]*$
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值