HTML中的table里面的元素排序

最新推荐文章于 2024-05-23 21:41:49 发布
最新推荐文章于 2024-05-23 21:41:49 发布
阅读量1w 收藏 6
点赞数 1
分类专栏： javascript JavaScript实例 Java学习之路 文章标签： JavaScript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangxin_blog/article/details/49130371
版权

我们在上网中都能看到很多能够排序的，如大小，时间等

现在我们也试一下排序功能：

排序的函数代码：里面含有点击之后排序--还原，和排升序和降序

	function sortAge(){
			//对年龄进行排序，要先进行获得每一行对象，然后对象对象中的第一个（从0 开始）的大小进行排序
			var tabNode = document.getElementById("tabid");
			var rows0 = tabNode.rows;
			var rows1 = [];
			//现将元素拷贝一份出来， 第一行不用排序
			for (var x = 1; x < rows0.length; x++) {
				rows1[x - 1] = rows0[x];
			}
			for (var x = 0; x < rows1.length - 1; x++) {//每个元素是行对象
				for (var y = x + 1; y < rows1.length; y++) {
					//对每一行的内容进行解析成数字
					if (parseInt(rows1[x].cells[1].innerHTML) > parseInt(rows1[y].cells[1].innerHTML)) {
						//alert("aa="+x+":"+rows1[x].cells[1].innerHTML);
						//alert("bb"+rows1[y].cells[1].innerHTML);
						var temp = rows1[x];
						rows1[x] = rows1[y];
						rows1[y] = temp;
					}
				}
			}
			
			/* 点击之后排序，排序之后恢复之前的状态

if (flag){
			
			for (var x = 0; x < rows1.length; x++) {
				//				tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容
				rows1[x].parentNode.appendChild(rows1[x]);
			}
		}else{
			
			for (var x = 1; x < rows0.length; x++) {
				//				tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容
				rows0[x].parentNode.appendChild(rows0[x]);
			}
		}
		flag=!flag;*/
		/* 下面的是点之后出现正序和逆序显示  正序和逆序的区别就是appendchild的前后关系而已*/
		var ageimg=document.getElementById("ageid");
		
		if (flag) {
			for (var x = 0; x < rows1.length; x++) {//排好序之后就从0开始
				//				tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容
				rows1[x].parentNode.appendChild(rows1[x]);
			}
			ageimg.innerHTML="年龄▲";//设置上面的图标
			
		}else{
			for (var x = rows1.length-1; x >=0; x--) {
				//				tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容
				rows1[x].parentNode.appendChild(rows1[x]);
			}
			ageimg.innerHTML="年龄▼"
		}
		flag=!flag;
			loading();//排序之后还要对颜色重新设置
				
		}
设置表格的背景颜色代码《导入的css》： 

function loading(){
				var name;
				var tabNode=document.getElementById("tabid");
				var rows=tabNode.rows;//获得每一行的数组对象
				var rowslength=rows.length;//每一行的长度
				for(var x=1;x<rowslength;x++){//根据每一个去设置
					if(x%2==0){
						rows[x].className="one";
					}else{
						rows[x].className="two";
					}
					//当移动上去之后，之前的颜色要记录下来，不然移下来之后全部都是一个颜色了
					rows[x].οnmοuseοver=function(){
						name=this.className;
						this.className="three";
					}
					rows[x].οnmοuseοut=function(){
						this.className=name;
					}
				}
				
			}
			οnlοad=function(){
				loading();
			}
css代码： 

	table td a:hover{
   			background-color:#0080c0;
   		}
		.one{
			background-color:#80ff00;
		}
		.two{
			background-color:#ff8040;
		}
		.three{
			background-color:#008040;
		}
		table{
			width:500px;
			height:500px;
			border:#400040 solid 2px;
			border-collapse:collapse;
		}
		table td,th{
			border:solid 2px;
		}
		table th{
			background-color:#c0c0c0;
		}
效果图  排序之前：

升序：


降序：

完整代码：

<!DOCTYPE html>
<html>
  <head>
    <title>sort.html</title>
   <style type="text/css">
   		table td a:hover{
   			background-color:#0080c0;
   		}
		.one{
			background-color:#80ff00;
		}
		.two{
			background-color:#ff8040;
		}
		.three{
			background-color:#008040;
		}
		table{
			width:500px;
			height:500px;
			border:#400040 solid 2px;
			border-collapse:collapse;
		}
		table td,th{
			border:solid 2px;
		}
		table th{
			background-color:#c0c0c0;
		}
	
   </style>
   	<script type="text/javascript">
   		
   			function loading(){
				var name;
				var tabNode=document.getElementById("tabid");
				var rows=tabNode.rows;//获得每一行的数组对象
				var rowslength=rows.length;//每一行的长度
				for(var x=1;x<rowslength;x++){//根据每一个去设置
					if(x%2==0){
						rows[x].className="one";
					}else{
						rows[x].className="two";
					}
					//当移动上去之后，之前的颜色要记录下来，不然移下来之后全部都是一个颜色了
					rows[x].οnmοuseοver=function(){
						name=this.className;
						this.className="three";
					}
					rows[x].οnmοuseοut=function(){
						this.className=name;
					}
				}
				
			}
			οnlοad=function(){
				loading();
			}
		var flag=true;
		function sortAge(){
			//对年龄进行排序，要先进行获得每一行对象，然后对象对象中的第一个（从0 开始）的大小进行排序
			var tabNode = document.getElementById("tabid");
			var rows0 = tabNode.rows;
			var rows1 = [];
			//现将元素拷贝一份出来， 第一行不用排序
			for (var x = 1; x < rows0.length; x++) {
				rows1[x - 1] = rows0[x];
			}
			for (var x = 0; x < rows1.length - 1; x++) {//每个元素是行对象
				for (var y = x + 1; y < rows1.length; y++) {
					//对每一行的内容进行解析成数字
					if (parseInt(rows1[x].cells[1].innerHTML) > parseInt(rows1[y].cells[1].innerHTML)) {
						//alert("aa="+x+":"+rows1[x].cells[1].innerHTML);
						//alert("bb"+rows1[y].cells[1].innerHTML);
						var temp = rows1[x];
						rows1[x] = rows1[y];
						rows1[y] = temp;
					}
				}
			}
			
			/* 点击之后排序，排序之后恢复之前的状态

if (flag){
			
			for (var x = 0; x < rows1.length; x++) {
				//				tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容
				rows1[x].parentNode.appendChild(rows1[x]);
			}
		}else{
			
			for (var x = 1; x < rows0.length; x++) {
				//				tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容
				rows0[x].parentNode.appendChild(rows0[x]);
			}
		}
		flag=!flag;*/
		/* 下面的是点之后出现正序和逆序显示  正序和逆序的区别就是appendchild的前后关系而已*/
		var ageimg=document.getElementById("ageid");
		
		if (flag) {
			for (var x = 0; x < rows1.length; x++) {//排好序之后就从0开始
				//				tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容
				rows1[x].parentNode.appendChild(rows1[x]);
			}
			ageimg.innerHTML="年龄▲";//设置上面的图标
			
		}else{
			for (var x = rows1.length-1; x >=0; x--) {
				//				tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容
				rows1[x].parentNode.appendChild(rows1[x]);
			}
			ageimg.innerHTML="年龄▼"
		}
		flag=!flag;
			loading();//排序之后还要对颜色重新设置
				
		}
   	</script>

  </head>
  
  <body>
   <table id="tabid">
   		<tr><th>姓名</th>
			<th><a href="javascript:void(0)" οnclick="sortAge()" id="ageid">年龄</a></th>
			<th>出生地</th>
		</tr>
		<tr>
			<td>张三</td>
			<td>13</td>
			<td>湖南长沙</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>15</td>
			<td>湖南常德</td>
		</tr>
		<tr>
			<td>jack</td>
			<td>45</td>
			<td>湖南临澧</td>
		</tr>
		<tr>
			<td>王华</td>
			<td>23</td>
			<td>浙江杭州</td>
		</tr>
		<tr>
			<td>张进</td>
			<td>30</td>
			<td>安微合肥</td>
		</tr>
		<tr>
			<td>周全</td>
			<td>23</td>
			<td>湖南益阳</td>
		</tr>
		<tr>
			<td>杨哥</td>
			<td>42</td>
			<td>湖南常德</td>
		</tr>
	
   </table>
  </body>
</html>

learning_code_blog
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表格排序
爱上狮子座的女孩
12-04 518
html>    head>    title>Table Sort Exampletitle>        script type="text/javascript">            function convert(sValue, sDataType) {                switch(sDataType) {                    case "in
Javascript对HTML表格排序-很实用
热门推荐
chunyuan314的博客
07-25 1万+
Javascript对HTML表格排序-很烂但实用 Javascript实现HTML表格排序，点击表头的标题单元格，即可对该列排序，升序降序切换，数字、文本都可以排序。 先看下面的效果图： 该功能已经封装成了一个Javascript函数，要实现表格排序的功能非常简单，只需： 引入包含该函数的js文件（需要预先引入jQuery）—— 这个不难 在需要排序的表格的标题单元格（th元素）的...
在HTML中实现table表头点击升序/降序排序
不二的博客
09-11 9739
题目：如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。 姓名 力量 敏捷 智力 德鲁伊 17 24 13 月之骑士 15 22 16 众神之王 19 15 20 流浪剑客 23 15 14 基本思路： ...
Lua中table.sort()使用方式
最新发布
qq_52373338的博客
05-23 461
compare这个参数是一个函数，它有两个参数，你可以理解为表中的两个不同元素，注意不一定是顺序的。我要降序，前一个大于后一个，那就等价前一个参数大于后一个参数，则最终结果满足a>b为true。总结：你要什么样的结果，就写满足该结果为true的条件，这样就随便写。返回false则表示a要在b之前，需要交换它们的位置。返回true则表示a要在b之后，不需要交换它们的位置。最后结果都满足a>b，a表示前一个，b表示后一个。compare:比较规则函数名。知道上述，随便写一个？
html排序图标,css实现排序升降图标
weixin_33128371的博客
06-04 676
效果图: code: Title .on { border-bottom: 2px solid #e61773; width: 150px; height: 40px; display: table-cell; position: relative; } .on a { display: block; o...
HTML表格自动排序「HTML Table Auto Sort」-crx插件
03-21
点击<th>标记按照升序/降序重新排列HTML表的行数。 ###重要内容###启用后，点击表格标题（“ 支持语言:English
原生JavaScript实现对html中table数据的排序
EEEEEEcho的博客
03-23 312
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="table-middle"> <a href="javascript:void(0)" id="sort-middle-table-by
javascript实现对表格元素进行排序操作
01-19
//对年龄进行排序，要先进行获得每一行对象，然后对象对象中的第一个（从0 开始）的大小进行排序 var tabNode = document.getElementById(tabid); var rows0 = tabNode.rows; var rows1 = []; //现将元素拷贝一...
layui table单元格事件修改值的方法
10-16
在这个例子中，我们使用了 `table.on('tool(jqGridFilter)', function (obj) {})` 来监听表格工具栏的事件，`tool(jqGridFilter)` 是表头过滤器的事件，因为没有具体的过滤器设置，这里我们用作通用的单元格事件监听...
jquery表格排序和筛选表.rar
09-05
对于压缩包中的"jquery表格排序和筛选表"，可能包含了一个示例项目，里面可能有HTML、CSS和JavaScript文件。HTML文件定义了表格结构，CSS文件用于样式设计，而JavaScript文件则是实现排序和筛选的核心。通过查看和...
某马机构----表格.rar
09-28
在这个教程中，我们将深入探讨HTML中的表格元素及其相关知识。 HTML（HyperText Markup Language）是网页内容的基础结构语言，其中的表格元素是展示数据和组织信息的重要工具。在HTML中，我们使用`<table>`、`<tr>`...
tablesorter实现HTML表格点击表头排序
04-01
tablesorter实现HTML表格点击表头排序，同样适用于JSP、PHP等主流Web开发
html表格table的表头排序，js代码fastunit使用案例
02-16
html表格table的表头排序，js代码fastunit使用案例
Extjs1.1中文教程
02-02
ExtJS 1.1具有灵活的布局系统，如Fit布局（完全填充父容器）、Table布局（类似HTML表格的布局）、Form布局（自动调整表单元素间距）等，这些布局使组件能适应不同的屏幕尺寸和需求。 **数据绑定** 早期的ExtJS已经...
页面上实现表格数据排序
BEYOND的博客
03-21 2718
源码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;style&gt; .table{ width: 400px; height: 180px; margin: auto; text-align: center; } .table th, .table td { width: 50px; height: 60p...
【前端实例】JavaScript对Table数据进行排序操作
LaoYe的博客
03-11 7284
【提出需求】 点击表格头部的时候根据对应列的所有值来进行排序，最终显示排序后的数据行。 【具体效果】 【步骤思路】 点击需要排序列的数据头，获取数据头所在列的索引。通过索引找到每一行所对应列的数据，之后对该列的所有数据进行排序（本实例只进行降序排列），排序结果的每个数据的索引就是该数据所对应行的位置。 【问题解决】 1、如何知道那一列需要排...
js针对html的数据列排序 tablesort.js（收集）3
moyan677的博客
08-16 185
function sort(tableId, sortColumn,nodeType) { var table = document.getElementById("theTable"); var tableBody = table.tBodies[0]; var tableRows = tableBody.rows; ...
JavaScript实现表格排序
不忘初心，方得始终
03-16 3283
Table sorter包括JavaScript和一点CSS，能够让原始的html table变得可以分别按照各栏数据值，对各行排序。效果 在表头任意一个栏目中点击一下，下面各行将按照此栏目值的升序排序 按照字符串比较来确定顺序 再次点击该栏目，变更为降序排序 点击其它栏目，则按其它栏目的值重新排序 注意，排序时，栏目奇偶行的背景色保持奇数白色、偶数浅灰色 要求 不能改动原html，只能够添加js
使用 JavaScript 对 HTML 表格进行排序
allway2的博客
03-31 527
我们经常遇到希望使表格具有交互性的情况。我们可能只想通过单击列或任何其他方法对它们进行排序。HTML 没有任何编程能力，因此我们必须使用 JavaScript 对 HTML 表格进行排序。不幸的是，没有内置的方法可以帮助我们对数组进行排序。因此，我们编写了利用 DOM 操作功能和比较功能的自定义方法。本教程教授如何使用 JavaScript 对 HTML 表格进行排序。 用户定义的方法使用以下两个辅助函数对数组进行排序。 getCellValue() 一个从给定表格行和列索引的单元格中获取内.
jQuery实现的Li和Table元素拖动排序
首先，我们需要在HTML页面中设置好待排序的元素。在这个例子中，我们有一个类名为"sortable"的`<ul>`或`<table>`元素。例如： ```html 条目1 条目2 条目3 ``` 接下来，我们需要引入jQuery库以及jQuery UI的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值