开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用js对html表格进行子排序

是一种通过JavaScript编程语言对HTML表格进行排序的方法。它可以帮助用户根据特定的列或条件对表格中的数据进行排序，以提供更好的数据展示和用户体验。

子排序是指在主排序的基础上，对相同主排序值的数据再进行次级排序。例如，对一个包含姓名和年龄的表格，可以首先按照姓名进行排序，然后对相同姓名的数据再按照年龄进行排序。

下面是一个使用JavaScript对HTML表格进行子排序的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>HTML表格子排序</title>
    <script>
        function sortTable(columnIndex) {
            var table = document.getElementById("myTable");
            var rows = table.rows;
            var switching = true;
            var shouldSwitch = false;
            var i, x, y;

            while (switching) {
                switching = false;
                for (i = 1; i < (rows.length - 1); i++) {
                    shouldSwitch = false;
                    x = rows[i].getElementsByTagName("TD")[columnIndex];
                    y = rows[i + 1].getElementsByTagName("TD")[columnIndex];

                    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                        shouldSwitch = true;
                        break;
                    }
                }
                if (shouldSwitch) {
                    rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                    switching = true;
                }
            }
        }
    </script>
</head>
<body>
    <table id="myTable">
        <tr>
            <th onclick="sortTable(0)">姓名</th>
            <th onclick="sortTable(1)">年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

在上述示例代码中，我们创建了一个HTML表格，并为表格的每个表头单元格添加了一个onclick事件，用于调用sortTable函数进行排序。sortTable函数接受一个参数columnIndex，表示要按照哪一列进行排序。

函数中使用了冒泡排序算法来对表格数据进行排序。通过比较相邻两行的特定列的值，如果需要交换位置，则进行交换。最终实现了按照指定列进行排序的功能。

这种方法可以应用于各种需要对表格数据进行排序的场景，例如对商品列表按照价格进行排序、对学生成绩表按照成绩进行排序等。

腾讯云提供了一系列与云计算相关的产品和服务，其中包括云服务器、云数据库、云存储等。您可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于腾讯云的产品和服务信息。

相关搜索:在JavaScript中使用addEventListener对HTML表格进行排序如何使用子属性对集合进行排序？使用R对html表格进行网络抓取对简单表格使用R进行HTML抓取在html表格中使用javascript umlaute (ä，ö，ü)对表格进行排序 Datatable :使用HTML元素对列进行排序如何使用子节点对XML元素进行排序？对底部放置空单元格的HTML表格进行排序如何按列对Excel表格进行排序 Bootstrap:对动态表格进行数据排序 js对字典进行排序如何使用XSLT对XML的子元素进行排序如何使用子数组对主数组进行排序(Android)如何使用CodeIgniter进行表格排序？使用javascript对表格进行排序 Javascript -对HTML表格进行排序(具有包含日期和时间的列)使用vue.js对列表进行排序对case语句的子段进行排序基于子值对firebase数据进行排序如何按子查询对列表进行排序？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

一个表格组件-vuejs示例

分析vuejs官网上一个表格组件的实现过程。原址：https://cn.vuejs.org/v2/examples/grid-component.html

01

报表系统练手(2) -- DataTables的使用（1）

有不同的页面主题风格：Base,bootstrap 3,jquery UI, Foundation, Semantic UI.

01

Js如何实现升序和降序

在网页中,实现列表的升序和降序,是一个比较常见的操作,尤其是在做一些数据栓选表格的时候,按照索引,时间等特定的参数,提供升序和降序排列的功能的

02

最近开发问题

方法1, 可以使用定高度,然后加个overflow:hidden. ,当点击查看更多时,把overflow去掉即可.但是当我需要给每个单元格加个hover显示详情的时候,发现position:absolute的元素都给overflow给盖住了.所以这个方法只能舍弃

02

JavaScript点击表格的表头，实现表格排序

1）页面预设布局页面上事先给出表头，具体html代码如下：其中表头的key属性作用后面说明。

01

H5+CSS3+JS逆向前置——HTML2、table表格标签

HTML，全称超文本标记语言（Hypertext Markup Language），是一种用于创建网页的标准标记语言。HTML为网页提供了一种结构性的标记方式，使得浏览器可以正确地解析和显示网页内容。

01

virtual DOM 与 diff 算法入门介绍

随着前端框架的流行，Vue 和 React 被越来越多的公司和团队使用，大家今天就跟着我一起来看看 virtual DOM 作为 Vue 和 React 的核心，它到底是什么，为什么会存在 virtual DOM，以及它是如何使用的，最后给大家简单介绍一些 diff 算法的实现。下面我们开始吧~ 通过今天的介绍，我们将了解以下三部分的内容，也希望大家看后有所收获~

02

Adobe dreamweaver CS6小白入门教程「建议收藏」

用dreamweaver制作图片切换效果_百度经验 https://jingyan.baidu.com/article/7c6fb4287f8b3580652c906d.html

03

jQuery 表格插件汇总

本文搜集了大量 jQuery 表格插件，帮助 Web 设计者更好地驾御 HTML 表格，你可以对表格进行横向和竖向排序，设置固定表头，对表格进行搜索，对大表格进行分页，对表格进行滚动，拖放操作等等。这些插件很多都包含详细的教程。希望能对大家的开发有帮助。

01

提升数据可视化：拖拽编辑自动汇总，树形数据表格展示新方式

树形结构是一种非常常见的数据结构，它由一组以层次关系排列的节点组成。树的结构类似于自然界中的一棵树，树根对应顶层节点，而子节点则分支延伸出来。

01

基于 HTML5 的 Web SCADA 报表

本文介绍了如何利用HT的表格控件实现海量数据的加载和展示，重点讲解了在HT中如何实现动态数据加载和实时刷新，并给出了具体的示例代码。此外，还介绍了如何利用HT的图表控件实现数据的可视化展示，包括饼图、柱状图等。

09

基于 HTML5 的 Web SCADA 报表

背景最近在一个 SCADA 项目中遇到了在 Web 页面中展示设备报表的需求。一个完整的报表，一般包含了筛选操作区、表格、Chart、展板等多种元素，而其中的数据表格是最常用的控件。在以往的工业项目中，所有的表格看起来千篇一律，就是通过数字和简单的背景颜色变化来展示相关信息。但是现在通过各种移动 App 和 Web 应用的熏陶，人们的审美和要求都在不断提高，尤其是在 Web 项目中，还采用老式的数字表格确实也有点落伍了。如何选择一个合适的 HTML 前端表格控件？此处可以省略一万字。哈哈。jQuery

03

HTML---网页编程(1)

HTML需要和CSS还有JS一起用，才能提现强大。所以，学了HTML。最好去学学CSS还有JS(JavaScript)

01

与Ajax同样重要的jQuery（1）

jQuery框架 jQuery 1.4 是企业主流版本，从jQuery1.6 开始引入大量新特性。最新版本 2.1.1，这里讲解以1.8.3为主(新版本主要是浏览器兼容问题以及新特性) jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.js jquery-1.8.3.js jQuery框架源码，没有被精简，体积较大（主要用来研究 jQuery源码），企业开发时，需要导入 jquery-1.8.3.min.js （精简过） 1.jQuery程序快速入门 window.

06

jquery dataTable 的学习之初始化插件（一）

最近用到了一个比较实用的jquery插件--jquery dataTable，这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：

01

项目小结：日立OA系统（Asp.net）

前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　进入公司6个月后被安排到该项目中，据说该项目规模很大，而拆分到公司的就只是二十来个页面，而我就负责其中的3个页面和其他页面的脚本代码，后来负责项目的性能优化工作。至于业务逻辑方面确实没什么可说的，就是CRUD。由一个很好沟通的前辈和我们6个新人一起来搞。这里有两项内容很值得总结，它们都让我技术上增进不少。目录　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 1.页面控件数庞大，页面加载极慢，一步

05

BootstrapTable的使用教程一：实现一个简单的表格和分页二：说一说BootstrapTable的属性一览表三：bootstrap-table如何设置首行变色，其他行不变色

官方网站： http://bootstrap-table.wenzhixin.net.cn/ 参考文档：http://issues.wenzhixin.net.cn/bootstrap-table/index.html 中文文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 下载bootstrap Table插件所必须的js，地址：https://github.com/wenzhixin/bootstrap-table 在开

04

layui2.0数据表格导出复杂表头EXCEL解决方案,table2excel

layui是一套面向所有层次的前后端开发者，零门槛开箱即用的前端UI解决方案。很多的后端开发在开发后台系统时候都会选择它。

02

layUI展示树状treetable树形表格完整代码「建议收藏」

前言：因项目功能需要，在shiro权限管理模块中需要使用树状展示，前端使用的layUI框架，在官网的开发文档上没有找到树状表格的内容。只有树状菜单的文档：https://www.layuion.com/doc/modules/tree.html layui官网已关闭，相关内容可到这里查看：https://www.layuion.com/

02

tablecloth 使用笔记

tablecloth.js是一个能够只用寥寥几行代码即可快速美化你页面上HTML代码的jQuery插件。 tablecloth.js自身携带了多种表格风格，同时支持表格的排序功能，使用也极其简单。如何使用在你的HTML导入jQuery、Bootstrap以及tablecloth.js随包发行的其他几个js文件（如果你想要tablecloth.js的全部功能的话）。 <link href="assets/css/bootstrap.css" rel="stylesheet"> <l

06

layui 树形表格 treeTable使用详细指南，不能折叠解决办法

最近在写一个商品分类管理的功能，本来想用layui的树形组件来写，但发现layui原生的tree只能展示title，而分类的其他字段无法展示，这就有点不适用了，无意中看到一位大神自定义写的一个树形表格组件，正好满足我的要求，特此将使用方法以及其中遇到的一些坑记录下来。。。

03

表格插件-bootstrap table的使用示例

基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

02

Bootstrap快速入门

Bootstrap学习有两个重点，一个是概念的理解，理解bootstrap是如何通过div来代替过去的table布局的；一个是常用结构的熟悉，做到需要的组件及时能找到，组合一下就可以满足需求。学习后的

06

前端面试手册

分别从HTML、CSS、JavaScript、综合四个方面总结，后续持续更新 ---- HTML部分 ---- Doctype的作用？文档声明，不存在或格式不正确会导致文档以兼容模式呈现标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行兼容模式页面以宽松的向后兼容的方式显示 HTML5不基于SGML，因此不需要对DTD进行引用行内、块级、空(void)元素行内：a b span img input select strong 块级：div ul ol li dl dt dd h

02

第三节 json数据绑定以及dom回流重绘、映射

----------------------------------json---------------------------------------------- json是一种特殊的数据格式 Json相对于普通格式来说，只是把属性名用双引号包起来了（单引号不行）在window浏览器中，提供了一个叫做(window.JSON)JSON的属性，它里面提供了两个方法： 1>JSON.parse(xxx) 在ie6~8不支持 2>JSON.stringify(xxx) 在ie6~8不支持

02

javascript dom学习笔记

http://blog.csdn.net/zhoulenihao/article/details/11099455

01

产品必懂技术术语（前端类）

单纯的控件只是展示了简陋的视觉UI和基本行为，在实际开发中需要用到的是经过各种样式装饰和动画还有丰富行为的UI，而且还会被重复利用。所以为了降低代码重复率，提高开发效率，一般开发会把一个或多个控件的结构、样式、行为、联动封装到一个文件中，这样一个组合文件就称为“组件”。

04

用这个库 3 分钟实现让你满意的表格功能：Bootstrap-Table

这是 HelloGitHub 推出的《讲解开源项目》[1]系列，今天给大家推荐一个基于 Bootstrap 和 jQuery 的表格插件：Bootstrap-Table

03

html 怎么让整体居中,html中表格整体居中详解html里面如何让表格居中[通俗易懂]

把表格在页面中间显示。。。分享代码。。。在这个无谓的年华，无论别人多么高高不可攀比，但小编还是选择，做一个适应自己的人。

04

动图展示 60+ 个前端常用插件库合集

https://segmentfault.com/a/1190000019151460

04

datatables使用教程

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

02

chatGpt即将取代你——chatGpt做技术调研

这些框架都是开源的，可以自由使用和修改，适合于创建各种类型的在线电子表格应用程序。

05

Element 入门教程

Element 入门官网：https://element.eleme.cn/#/zh-CN 引入 Element 的 css、js文件和 Vue.js ```html <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> ``` 创建 Vue 核心对象 `

05

Django搭建博客（三）：文章的储存和页面的渲染

前面我们把博客页面的设计给出来了，但是现在的页面只有框架，我们还需要一些内容来填充这个框架。

02

0307前端笔试题

2.制作级联菜单的时候，调用的是下拉列表的哪个事件？解答： onChange()

02

ElementUI通过CSS修改组件样式

最近在做一个比赛项目，在前端设计（使用Vue.js）的时候用到了ElementUI组件。前端整体的背景是深色调，调用ElementUI各项组件时其样式并不能很好的契合主题，因此需要通过CSS修改其色调及样式，但是直接通过class定位组件，并添加!important关键字后依然不能改动。

04

表格插件-bootstrap table的表内查看编辑删除

基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

03

BootStrap初始

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

01

ABP入门系列（14）——应用BootstrapTable表格插件

源码路径：Github-LearningMpaAbp 1. 引言之前的文章ABP入门系列（7）——分页实现讲解了如何进行分页展示，但其分页展示仅适用于前台web分页，在后台管理系统中并不适用。后台管

05

datatables应用程序接口API

Datatables有一个强大的api，用来处理表格上的数据，你可以添加数据到已经存在的表格，或者对已经存在的数据进行操作。 API旨在能够很好地操作表格中的数据。

03

SpreadJS使用进阶指南 - 使用 NPM 管理你的项目

前言 SpreadJS作为一款性能出众的纯前端电子表格控件，自2015年发布以来，已经被广泛应用于各领域“在线Excel”数据管理项目中。NPM，作为管理Node.js库最有力的手段，解决了很多NodeJS代码部署的问题。如今，为让您更方便的使用产品和更好地管理项目中的SpreadJS代码，我们已将SpreadJS应用打包发布到了NPM服务器。如您需要，请点击查看（需要FQ） NPM简介也许您刚刚接触前端开发，或者刚刚使用NodeJS。NPM对于您来说，可能会感到些许陌生。这里，是NPM的简单介绍，希望

02

15个 Vue.js 高级面试题[每日前端夜话0xF2]

渲染项目列表时，key 属性允许 Vue 跟踪每个 Vnode。key 值必须是唯一的。

02

「学习笔记」HTML基础

「网页」主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及Flash等。

02

前端|layui后台管理—table 数据表格

layui是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用，非常适合界面的快速开发。layui区别于那些基于MVVM底层的UI框架，不需要各种前端工具的复杂配置，只需面对浏览器本身。

02

UI标签库的话题：JEECG智能开发平台 BaseTag(样式表和JS标签的引入)

UI标签库专题一：JEECG智能开发平台 BaseTag(样式表和JS引入标签)

02

Thinkphp+layui动态表格的使用

今天早上想将后台中的表格部分使用layui的动态表格模块来实现，早上简单的看了下手册，晚上回家详细的看了手册，写了代码，实现了功能。下面直接上代码及效果图：

03

[Java面试九]脚本语言知识总结.

核心内容概述 1.JavaScript加强，涉及到ECMAScript语法、BOM对象、DOM对象以及事件。 2.Ajax传统编程。 3.jQuery框架，九种选择器为核心学习内容 4.JQuery UI插件 5.jQuery Ajax编程 6.jQuery第三方插件 7.反向Ajax编程(彗星) 一、JavaScript基础加强 JavaScript是在浏览器内容运行，无需编译、解释执行动态脚本语言，是一种弱类型语言，所有变量使用var定义。 JavaScript的3个组成部分分别为：核心(ECMAScr

Datatables表格插件，你用过吗？

分页，即时搜索和排序几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns …… 丰富多样的option和强大的API 支持国际化超过2900+个单元测试免费开源（ MIT license ）！商业支持更多特性请到官网查看英文官网地址中文官网地址点击导航栏 ->手册->安装安装教程地址

03

HTML+CSS高级

第一章一、内联块 display: inline-block; 1、特征： 1.1 块级元素在一行显示（得到内联元素的属性） 1.2 内联元素支持宽高（得到块的属性） 1.3 没有宽度的时候，内容撑开宽度（得到内联元

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭