当前位置: 首页 > news >正文

JavaScript排序

直接看代码

<table border="1" cellspacing="0"><thead class="tou"><tr><td>选择按钮</td><td>汽车编号</td><td>汽车图片</td><td>汽车系列名称</td><td>汽车能源</td><td>汽车报价</td><td>汽车特点</td><td>汽车类型</td><td class="gn">功能</td></tr></thead><tbody class="shenti"><c:forEach items="${lb }" var="l" varStatus="li"><tr class="t"><td><input type="checkbox" class="cx" value="${l.cid }"/></td><td>${li.count }</td><td><img src="${l.cimg}" style="width: 160px;height: 90px"></td><td>${l.csy }</td><td>${l.cny }</td><td class="bj">${l.cprice }</td><td>${l.ctd }</td><td>${l.tyname }</td><td><input type="button" value="修改" class="anniu1" οnclick="xg(${l.cid})"/><input type="button" value="删除" class="anniu2" οnclick="sc(${l.cid})"/></td></tr></c:forEach></tbody>
</table>

//升序排序
function sxpx(){//创建两个数组let arr1=[];let arr2=[];$(".t").each(function (i){arr1[i]=$(this).html();})$(".bj").each(function (i){arr2[i]=Number($(this).html());})//冒泡排序for (let i = 0; i < arr2.length-1; i++) {for (let j = 0; j < arr2.length-1-i; j++) {if (arr2[j]>arr2[j+1]){//小数组排序let temp2=arr2[j];arr2[j]=arr2[j+1];arr2[j+1]=temp2;//大数组排序let temp1=arr1[j];arr1[j]=arr1[j+1];arr1[j+1]=temp1;}}}$(".t").each(function (i){$(this).html(arr1[i]);})
}
//降序排序
function jxpx(){//创建两个数组let arr1=[];let arr2=[];$(".t").each(function (i){arr1[i]=$(this).html();})$(".bj").each(function (i){arr2[i]=Number($(this).html());})//冒泡排序for (let i = 0; i < arr2.length-1; i++) {for (let j = 0; j < arr2.length-1-i; j++) {if (arr2[j]<arr2[j+1]){//小数组排序let temp2=arr2[j];arr2[j]=arr2[j+1];arr2[j+1]=temp2;//大数组排序let temp1=arr1[j];arr1[j]=arr1[j+1];arr1[j+1]=temp1;}}}$(".t").each(function (i){$(this).html(arr1[i]);}

}

 如果让我自己写的话,我也有点懵,但思路我是理解的,蓝色部分分别是给列表全页面和要排序的列设置class,然后开始排序。

首先,创建两个数组,用each遍历全页面和要排序的列,分别装到连两个数组中,然后进行冒泡排序,排序是对要排序的那个数组进行冒泡,我们看见有小数组排序和大数组排序,因为当列表页面一列动了,那其它列是不是也要跟着动,数组才是正确的,所以大数组跟着小数组的排序规则进行排序就可以了,组后大数组arr1排完后,将整体的数据给放到以前的数组中就可以了,升序变降序,降序变升序,就把比较符号换换就可以了,逻辑不是很绕,到写起来头晕😔,大家能用sql语句排序就用sql语句排序吧!

相关文章:

JavaScript排序

直接看代码 <table border"1" cellspacing"0"><thead class"tou"><tr><td>选择按钮</td><td>汽车编号</td><td>汽车图片</td><td>汽车系列名称</td><td>汽车能源</…...

【读书笔记】ICS设备及应用攻击(一)

工控系统通常是由互联设备所构成的大型复杂系统&#xff0c;这些设备包括类似于人机界面&#xff08;HMI&#xff09;、PLC、传感器、执行器以及其他使用协商好的协议进行相互通信的设备。所有交互背后的驱动力都是软件&#xff0c;软件为工控系统中几乎所有部分的运行提供支撑…...

网络原理(HTTP篇)

网络原理HTTP 前言HTTPHTTP的工作流程抓包工具抓取HTTP报文HTTP报文格式 请求报文具体细节首行URLURL的基本格式URL encode 方法 报头(header)HostContent-Length 和 Content-TypeUser-Agent&#xff08;UA&#xff09;RefererCookie&#xff08;重要&#xff09; 前言 如图&a…...

关于油封密封件你了解多少?

油封也称为轴封或旋转轴封&#xff0c;旨在防止设备中的润滑剂泄漏&#xff0c;并防止外部污染物进入机械。它们通常用于泵和电机等旋转设备&#xff0c;在固定部件和移动部件之间提供密封界面。 油封的有效性很大程度上取决于其材料。不同的材料具有不同程度的耐热性、耐压性…...

Leetcode 72 编辑距离

题意理解&#xff1a; 给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符 删除一个字符 替换一个字符 将word1转换为word2,可以进行三种操作&#xff1a;增、删、改&am…...

羊大师揭秘,如何挑选出好牧场的奶羊,该怎么看

羊大师揭秘&#xff0c;如何挑选出好牧场的奶羊&#xff0c;该怎么看 了解牧场的管理和环境&#xff1a;好的牧场应该有规范的管理制度&#xff0c;环境整洁&#xff0c;草场茂盛&#xff0c;为奶羊提供了充足的食物和良好的生活环境。在这样的牧场中&#xff0c;奶羊能够得到…...

MySQL数据库基础(八):DML数据操作语言

文章目录 DML数据操作语言 一、DML包括哪些SQL语句 二、数据的增删改&#xff08;重点&#xff09; 1、数据的增加操作 2、数据的修改操作 3、数据的删除操作 DML数据操作语言 一、DML包括哪些SQL语句 insert插入、update更新、delete删除 二、数据的增删改&#xff08…...

(09)Hive——CTE 公共表达式

目录 1.语法 2. 使用场景 select语句 chaining CTEs 链式 union语句 insert into 语句 create table as 语句 前言 Common Table Expressions&#xff08;CTE&#xff09;&#xff1a;公共表达式是一个临时的结果集&#xff0c;该结果集是从with子句中指定的查询派生而来…...

Spring 用法学习总结(四)之 JdbcTemplate 连接数据库

&#x1f409;目录 9 JdbcTemplate 9 JdbcTemplate Spring 框架对 JDBC 进行了封装&#xff0c;使用 JdbcTemplate 方便实现对数据库操作 相关包&#xff1a; 百度网盘链接https://pan.baidu.com/s/1Gw1l6VKc-p4gdqDyD626cg?pwd6666 创建properties配置文件 &#x1f4a5;注意…...

第 385 场 LeetCode 周赛题解

A 统计前后缀下标对 I 模拟 class Solution { public:int countPrefixSuffixPairs(vector<string> &words) {int n words.size();int res 0;for (int i 0; i < n; i)for (int j i 1; j < n; j)if (words[i].size() < words[j].size()) {int li words[…...

什么是RabbitMQ?

一、引言 RabbitMQ是一个开源的消息代理软件&#xff0c;用于在分布式系统中传递消息。它实现了高级消息队列协议&#xff08;AMQP&#xff09;&#xff0c;提供了一种可靠的、强大的、灵活的消息传递机制&#xff0c;使得不同应用程序或组件之间可以轻松地进行通信。 二、概念…...

JWT登录验证前后端设计与实现笔记

设计内容 前端 配置全局前置路由守卫axios拦截器登录页面和主页 后端 JWT的封装登录接口中间件放行mysql数据库的连接 详细设计 路由设计 配置全局前置守卫&#xff0c;如果访问的是登录页面则放行&#xff0c;不是则进入判断是否有token&#xff0c;没有则拦截回到登录…...

自定义类型详解 ----结构体,位段,枚举,联合

目录 结构体 1.不完全声明 2.结构体的自引用 3.定义与初始化 4.结构体内存对齐与结构体类型的大小 结构体嵌套问题 位段 1.什么是位段&#xff1f; 2.位段的内存分配 枚举 1.枚举类型的定义 2.枚举的优点 联合&#xff08;共同体&#xff09; 1.联合体类型的声明以…...

VueCLI核心知识综合案例TodoList

目录 1 拿到一个功能模块首先需要拆分组件&#xff1a; 2 使用组件实现静态页面的效果 3 分析数据保存在哪个组件 4 实现添加数据 5 实现复选框勾选 6 实现数据的删除 7 实现底部组件中数据的统计 8 实现勾选全部的小复选框来实现大复选框的勾选 9 实现勾选大复选框来…...

关于cuda路径问题

问题&#xff1a;Could not load dynamic library ‘libcudart.so.11.0’ 原因&#xff1a;调用系统环境下的cuda但系统环境没有装cuda 解决&#xff1a; 1.在系统环境装cuda&#xff0c;但如果每权限就不好操作&#xff1b; 2.用虚拟环境装好的cuda路径丢给环境变量 暂时性&am…...

六、Spring/Spring Boot整合ActiveMQ

Spring/Spring Boot整合ActiveMQ 一、Spring整合ActiveMQ1.pom.xml2.Queue - 队列2.1 applicationContext.xml2.2 生产者2.3 消费者 3.Topic - 主题3.1 applicationContext.xml3.2 生产者3.3 消费者 4.消费者 - 监听器4.1 编写监听器类4.2 配置监听器4.3 生产者消费者一体 二、…...

树莓派4B(Raspberry Pi 4B)使用docker搭建springBoot/springCloud服务

树莓派4B&#xff08;Raspberry Pi 4B&#xff09;使用docker搭建springBoot/springCloud服务 前提&#xff1a;本文基于Ubuntu&#xff0c;Java8&#xff0c;SpringBoot 2.6.13讲解 准备工作 准备SpringBoot/SpringCloud项目jar包 用 maven 打包springBoot/springCloud项目&…...

数据库设计、JDBC、数据库连接池

数据库设计 数据库设计概念 数据库设计就是根据业务 系统的具体需求&#xff0c;结合我们所选用的DBMS,为这个业务系统构造出最优的数据存储模型。建立数据库中的表结构以及表与表之间的关联关系的过程。有哪些表?表里有哪些字段?表和表之间有什么关系? 数据库设计的步骤…...

SpringBoot实现OneDrive文件上传

SpringBoot实现OneDrive文件上传 源码 OneDriveUpload: SpringBoot实现OneDrive文件上传 获取accessToken步骤 参考文档&#xff1a;针对 OneDrive API 的 Microsoft 帐户授权 - OneDrive dev center | Microsoft Learn 1.访问Azure创建应用Microsoft Azure&#xff0c;使…...

C++初阶:容器适配器介绍、stack和queue常用接口详解及模拟实现

介绍完了list类的相关内容后&#xff1a;C初阶&#xff1a;适合新手的手撕list&#xff08;模拟实现list&#xff09; 接下来进入新的篇章&#xff0c;stack和queue的介绍以及模拟&#xff1a; 文章目录 1.stack的初步介绍2.stack的使用3.queue的初步介绍4.queue的使用5.容器适…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...