表格排序

最新推荐文章于 2023-12-29 18:01:52 发布
最新推荐文章于 2023-12-29 18:01:52 发布
阅读量180 收藏
点赞数
分类专栏： # JAVA WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ldw201510803006/article/details/74913955
版权

1、li排序：

所用的基础知识：appendChild()方法的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#ul1{background: green;}
			#ul2{background: yellow;}
		</style>
		
		<script>
			window.onclick = function(){
				var oUl1 = document.getElementById("ul1");
				var oUl2 = document.getElementById("ul2");
				var oBtn = document.getElementById("btn1");
				
				oBtn.onclick = function(){
					var aLi = oUl1.getElementsByTagName("li");
					//oUl1.removeChild(aLi[0]);
				    oUl2.appendChild(aLi[0]); //作用：1、删除原节点  2增加新节点、
				}
			}
		</script>
	</head>
	<body>
		
		<ul id="ul1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
		<input type = "button" value="移动" id="btn1">
		
		<ul id = "ul2">
		</ul>
	</body>
</html>

li排序： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#ul1{background: green;}
		</style>
		
		<script>
			window.onclick = function(){
				var oUl1 = document.getElementById("ul1");
				var oBtn = document.getElementById("btn1");
				
				oBtn.onclick = function(){
					var aLi = oUl1.getElementsByTagName("li"); //得到的是元素集合，并不是真正意义上的数组，故不能直接使用sort()方法。
                    
                    var arry = [];
                    
                    for(var i = 0; i < aLi.length; i++){
                    	arry[i] = aLi[i];
                    }
                    
                    arry.sort(function(li1,li2){ //sort方法需要一个比较函数
                    	var num1 = parseInt(li1.innerHTML);
                    	var num2 = parseInt(li2.innerHTML);
                    	return num1 - num2;
                    })
                    
                    for(var i = 0; i < arry.length; i++){
                    	oUl1.appendChild(arry[i]);
                    }
				}
			}
		</script>
	</head>
	<body>
		
		<ul id="ul1">
			<li>100</li>
			<li>20</li>
			<li>310</li>
			<li>4</li>
			<li>5</li>
			<li>10</li>
		</ul>
		<input type = "button" value="排序" id="btn1">
	</body>
</html>


2、表格排序：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onclick = function(){
	            var oBtn = document.getElementById("btn1");
	            var oTab = document.getElementsByTagName("table")[0];
	            
	            oBtn.onclick = function(){
	            	var arry = [];
	            	
	            	for(var i = 0; i < oTab.tBodies[0].rows.length; i++){
	            		arry[i] = oTab.tBodies[0].rows[i];
	            	}
	            	
	            	arry.sort(function(tr1,tr2){
	            		var num1 = parseInt(tr1.cells[0].innerHTML);
	            		var num2 = parseInt(tr2.cells[0].innerHTML);
	            		
	            		return num1 - num2;
	            	});
	            	
	            	for(var i = 0; i < arry.length; i++){
	            		oTab.tBodies[0].appendChild(arry[i]);
	            	}
	            }
			}
		</script>
		
	</head>
	<body>
	<input id = "btn1" type = "button" value = "排序"/>
		<table border="1px" width="500px" id = "tab1">
			<thead>
				<td>ID</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>操作</td>
			</thead>
			<tbody>
				<tr>
					<td>5</td>
					<td>blue</td>
					<td>27</td>
					<td></td>
				</tr>
				<tr>
					<td>2</td>
					<td>张三</td>
					<td>36</td>
					<td></td>
				</tr>
				<tr>
					<td>1</td>
					<td>李斯</td>
					<td>47</td>
					<td></td>
				</tr>
				<tr>
					<td>3</td>
					<td>李斯</td>
					<td>47</td>
					<td></td>
				</tr>	
				<tr>
					<td>4</td>
					<td>李斯</td>
					<td>47</td>
					<td></td>
				</tr>					
			</tbody>
		</table>
		
	</body>
</html>



柏油
关注
专栏目录
在 Vue.js 中实现表格排序功能
weixin_44976692的博客
06-08 4万+
requestNum和，我们需要在columns数组中定义这些字段，并启用排序功能。data() {return {data: [],columns: [title: '请求数',},title: '响应时间',},],通过本文，我们了解了如何在 Vue.js 项目中实现一个具有排序功能的表格。我们使用 Ant Design Vue 组件库来构建表格，并通过定义和sortData方法来处理排序逻辑。希望这些示例和步骤能帮助你在自己的项目中实现类似的功能。
css表格排序,纯CSS实现表格排序-利用CSS 变量和Flexbox
weixin_31256263的博客
08-04 906
1.引子今天闲逛知名前端资讯站Front-End Front，发现一个比较有意思的效果，给大家分享下，希望可以对大家有所启发。纯CSS实现表格排序心急的同学，先看效果，我放在codepen上。本案例用到了以下知识点：CSS变量Flexbox布局grid布局(非必须，可以替代)因此，本案例只在现代浏览器中运行良好。2.核心原理我们利用Flexbox的方式打破表格布局，让表格做Flex容器(conta...
js ul 清缓存_JavaScript使用ul中li标签实现删除效果
weixin_29901799的博客
01-14 471
ul {list-style: none;}li {background-color: #ddd;margin-top: 2px;}li:hover {background-color: #be3131;}li.hover {background-color: green;};篮球足球羽毛球篮球足球羽毛球篮球足球羽毛球删除//获取所有的li节点var list = document.getElem...
element表格排序功能
最新发布
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
12-29 788
【代码】element表格排序功能。
html 表格排列,html表格如何排序？表格排序详解!
weixin_32902659的博客
06-29 1873
表格排序p{width:1024px;margin:0auto;/*p相对屏幕左右居中*/}table{border:solid1px#666;border-collapse:collapse;width:100%;cursor:default;}tr{border:solid1px#666;height:30px;}tabletheadtr{backgr...
excel表格排序，4种排序教程全都有
热门推荐
数据蛙的博客
05-30 3万+
excel可以对庞大的数据源利用排序进行快速整理，使数据一目了然并且美观，excel表格排序的具体流程是怎样的呢？小编给大家罗列了4种排序教程！赶紧来围观吧！
VBA实现Word表格排序
神奇的BI
09-11 748
在Word文档的多列表格中,需要按照第一列进行排序,同时保持其他列的数据对应顺序不变。想必大家都知道，在Excel中可以简单地使用排序功能实现这种需求,但是对于Word表格则需要使用VBA代码进行处理。 利用字典对象可以方便地存储表格数据,通过键值对应关系保证排序后数据顺序正确性，如果使用普通的排序算法对于二维数组排序，那么在排序过程中交换数组元素时，将打乱第2列数据的顺序。
vue表格排序
weixin_44683763的博客
12-21 1506
<el-table :data="userList" border stripe :row-style="{height:0+'px'}" :cell-style="userListcellStyle" highlight-current-row style="margin-top:30px" @sort-change="sortChange"> <el-table-column label="订单金额" prop="orderAmount" width="200" sortable=
JavaScript实现表格排序
05-20 1543
Table sorter包括JavaScript和一点CSS，能够让原始的html table变得可以分别按照各栏数据值，对各行排序。 效果 在表头任意一个栏目中点击一下，下面各行将按照此栏目值的升序排序 按照字符串比较来确定顺序 再次点击该栏目，变更为降序排序 点击其它栏目，则按其它栏目的值重新排序 注意，排序时，栏目奇偶行的背景色保持奇数白色、偶数浅灰色 要求 不能改动原html...
jQuery Table表格排序显示代码.zip
07-05
本资源“jQuery Table表格排序显示代码.zip”聚焦于利用jQuery实现动态表格排序的功能，这对于数据展示和用户交互至关重要。下面将详细阐述相关知识点。 1. **jQuery基础**：首先，理解jQuery的基础是至关重要的。...
JavaScript实现表格排序方法
10-27
JavaScript作为前端开发中不可或缺的语言，常被用来实现各种动态交互效果，包括表格排序。本文旨在介绍如何使用JavaScript实现表格排序的方法。 ### 知识点1：JavaScript排序算法的选择 实现表格排序的关键在于...
html表格排序资源
12-08
jquery-tablesort则是一个独立于jQuery的表格排序库，它提供了类似的功能，但不依赖于jQuery。这意味着如果你的项目不使用jQuery或者希望减少依赖，这个库是个不错的选择。jquery-tablesort同样支持多种数据类型的...
vue3表格排序
ping
09-28 433
vue3表格排序。
从jsp页面中连接数据库并进行相关操作（增删查改）
持之以恒
04-18 2万+
1、在servlet中处理读取数据库中的内容； 2、编写一个java类封装对数据库的加载、连接以及各种查询、更新方法； 3、编写一个javaBean 其参数对应于数据库中的列名 4、servlet中读取数据完成后，交于jsp界面输出 数据库中的数据： 读取的数据： 具体如下： 一：java类，封装对数据库的加载、连接以及各种查询、更新方法；
jsp 页面中连接sql server 2008数据库
持之以恒
04-18 1万+
根据我自己的连接情况，综合网上的方法（也就是将网上的一些方法组合在一起，希望对你有帮助） 一：怎样更改SQL Server 2008的身份验证方式 大家都知道sql server 有两种登录验证方式，即sql server验证方式和windows验证方式，但是sql server默认的是windows登录验证方式，我们如何启用sql server和windows混合的验证方式并
Feign 应用之 RequestInterceptor 拦截器，超实用指南
持之以恒
09-26 1万+
思考一下，你目前正在使用微服务体系，一个普通的用户请求可能会在微服务之间多次调用，而途径的每个微服务都需要原始请求的部分参数，你会如何传递这些参数？ 在之前的文章中，我们了解到，Feign 的本质就是 JAVA 易用版的 HTTP 上层封装，本质还是 `HTTP` 调用 想要原始请求参数在微服务之间流转，本质就是在调用下游服务的 HTTP 请求头上添加这些参
服务端实时推送技术之SSE（Server-Send Events）
持之以恒
04-28 1万+
服务端推送，也称为消息推送或通知推送，是一种允许应用服务器主动将信息发送到客户端的能力，为客户端提供了实时的信息更新和通知，增强了用户体验。
JS快速实现表格排序
在JavaScript中实现表格排序，通常需要以下步骤： 1. **获取表格元素**：首先，通过`document.getElementById`函数获取HTML中的表格元素。在这个示例中，使用了`$`函数作为简化的ID选择器，它返回指定ID的DOM元素。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柏油

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值