当前位置: 首页 > 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.容器适…...

VSCode里PlatformIO插件抽风?手把手教你彻底卸载重装PIO(解决创建工程失败)

VSCode PlatformIO插件异常终极解决手册&#xff1a;从崩溃到重生的全流程指南 当你在VSCode中满怀期待地点击"New Project"按钮&#xff0c;却看到那个刺眼的红色错误提示时&#xff0c;那种挫败感每个开发者都懂。PlatformIO作为物联网开发的瑞士军刀&#xff0c;一…...

Lingtrain Aligner:如何让多语言文本对齐变得像拼图一样简单?

Lingtrain Aligner&#xff1a;如何让多语言文本对齐变得像拼图一样简单&#xff1f; 【免费下载链接】lingtrain-aligner Lingtrain Aligner — ML powered library for the accurate texts alignment. 项目地址: https://gitcode.com/gh_mirrors/li/lingtrain-aligner …...

nodejs后端服务如何接入taotoken调用多模型能力

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Node.js 后端服务如何接入 Taotoken 调用多模型能力 基础教程类&#xff0c;面向使用 Node.js 构建后端服务或前端应用的开发者&am…...

【NotebookLM戏剧研究辅助实战指南】:20年戏剧学者亲授AI赋能文本细读的5大黄金工作流

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM戏剧研究辅助的底层逻辑与学科适配性 NotebookLM 以“语义锚点驱动”为核心机制&#xff0c;将用户上传的原始文本&#xff08;如莎士比亚手稿影印本OCR结果、梅兰芳口述史转录稿、《奥尼尔书…...

【ElevenLabs企业级克隆部署白皮书】:单模型支持12种语境情绪、延迟<480ms、通过GDPR+CCPA双认证

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs企业级语音克隆技术全景概览 ElevenLabs 企业级语音克隆技术以高保真度、低延迟和强可控性为核心&#xff0c;面向金融客服、跨国培训、无障碍内容生成等关键业务场景提供端到端语音合成解决…...

AI 编程能力实战基准测试报告:编程能力评估体系 (Programming Capability Benchmark)

&#x1f916; AI 编程能力实战基准测试报告&#xff1a;编程能力评估体系 (Programming Capability Benchmark) 文件目标: 一份用于评估当前顶级生成式模型&#xff08;如GPT-5.5, Claude 4.7, Deepseek V4等&#xff09;实际软件开发能力和系统级思维的权威指南。 核心原则: …...

COLMAP实战:跳过特征提取,直接用已知位姿完成三角测量与稠密重建

COLMAP高效重建实战&#xff1a;基于已知位姿的三角测量与稠密重建加速方案 三维重建技术正在机器人导航、AR/VR内容生成等领域快速普及&#xff0c;但传统流程中特征提取与匹配环节往往消耗超过70%的计算时间。当相机位姿已通过SLAM或其他传感器获取时&#xff0c;如何跳过这些…...

CTF学习规划————1、如何入门CTF

CTF学习规划————1、如何入门CTF 无意中发现了一个巨牛巨牛的人工智能教程&#xff0c;忍不住分享一下给大家。教程不仅是零基础&#xff0c;通俗易懂&#xff0c;小白也能学&#xff0c;而且非常风趣幽默&#xff0c;还时不时有内涵段子&#xff0c;像看小说一样&#xff0…...

NotebookLM图书馆学研究风险清单(含3类学术伦理红线+4种元数据污染场景)

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;NotebookLM图书馆学研究风险清单&#xff08;含3类学术伦理红线4种元数据污染场景&#xff09; NotebookLM 作为面向研究者的AI增强型笔记工具&#xff0c;其在图书馆学实证研究中的深度应用正引发对学术规范与…...

如何在卡片悬停时添加内边距而不引起布局偏移

本文详解如何通过 box-sizing: border-box、合理设置宽高约束及子元素尺寸策略&#xff0c;在卡片 hover 时安全添加 padding&#xff0c;避免因盒模型计算导致的布局抖动或相邻卡片位移。 本文详解如何通过 box-sizing: border-box、合理设置宽高约束及子元素尺寸策略&am…...