html表格怎么排序

发布时间:2022-02-22 15:30:32 作者:iii
来源:亿速云 阅读:194

本篇内容介绍了“html表格怎么排序”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

对于表格排序的流程如下:

获取鼠标点击的表头单元格遍历我们所有的数据,从而获取<tr>的内容获取相对应<tr>下的<td>标签,然后我们将获取的<tr>、<td>生成我们的数组,根据不同的<tr>设定来采取不同的方式进行内容对比,这样子在根据比较结果对数组array进行排序    ;然后将排序后的数组元素重新赋值给已经置空的<tr> 。 如果已经对该列排序过了,则直接对数组进行倒置。

<html>	<head>		<title> 表格排序 </title>		<meta charset="utf-8">		<meta name="Generator" content="EditPlus">		<meta name="Author" content="tschengbin">		<meta name="Keywords" content="jquery tableSort">		<meta name="Description" content="">		<script src="http://code.jquery.com/jquery-latest.js"></script>		<style type="text/css">			p {				width: 1024px;				margin: 0 auto;				/*p相对屏幕左右居中*/			}			table {				border: solid 1px #666;				border-collapse: collapse;				width: 100%;				cursor: default;			}			tr {				border: solid 1px #666;				height: 30px;			}			table thead tr {				background-color: #ccc;			}			td {				border: solid 1px #666;			}			th {				border: solid 1px #666;				text-align: center;				cursor: pointer;			}			.sequence {				text-align: center;			}			.hover {				background-color: #3399FF;			}		</style>	</head>	<body>		<p>		<table id="tableSort">			<thead>				<tr>					<th type="number">序号</th>					<th type="string">书名</th>					<th type="number">价格(元)</th>					<th type="string">出版时间</th>					<th type="number">印刷量(册)</th>					<th type="ip">IP</th>				</tr>			</thead>			<tbody>				<tr class="hover">					<td class="sequence">1</td>					<td>狼图腾</td>					<td>29.80</td>					<td>2009-10</td>					<td>50000</td>					<td>192.168.1.125</td>				</tr>				<tr>					<td class="sequence">2</td>					<td>孝心不能等待</td>					<td>29.80</td>					<td>2009-09</td>					<td>800</td>					<td>192.68.1.125</td>				</tr>				<tr>					<td class="sequence">3</td>					<td>藏地密码2</td>					<td>28.00</td>					<td>2008-10</td>					<td></td>					<td>192.102.0.12</td>				</tr>				<tr>					<td class="sequence">4</td>					<td>藏地密码1</td>					<td>24.80</td>					<td>2008-10</td>					<td></td>					<td>215.34.126.10</td>				</tr>				<tr>					<td class="sequence">5</td>					<td>设计模式之禅</td>					<td>69.00</td>					<td>2011-12</td>					<td></td>					<td>192.168.1.5</td>				</tr>				<tr>					<td class="sequence">6</td>					<td>轻量级 Java EE 企业应用实战</td>					<td>99.00</td>					<td>2012-04</td>					<td>5000</td>					<td>192.358.1.125</td>				</tr>				<tr>					<td class="sequence">7</td>					<td>Java 开发实战经典</td>					<td>79.80</td>					<td>2012-01</td>					<td>2000</td>					<td>192.168.1.25</td>				</tr>				<tr>					<td class="sequence">8</td>					<td>Java Web 开发实战经典</td>					<td>69.80</td>					<td>2011-11</td>					<td>2500</td>					<td>215.168.54.125</td>				</tr>			</tbody>		</table>		</p>		<script type="text/javascript">			$(document).ready(function() {				var tableObject = $('#tableSort'); //获取id为tableSort的table对象				var tbHead = tableObject.children('thead'); //获取table对象下的thead				var tbHeadTh = tbHead.find('tr th'); //获取thead下的tr下的th				var tbBody = tableObject.children('tbody'); //获取table对象下的tbody				var tbBodyTr = tbBody.find('tr'); //获取tbody下的tr				var sortIndex = -1; //初始化索引				tbHeadTh.each(function() { //遍历thead的tr下的th					var thisIndex = tbHeadTh.index($(this)); //获取th所在的列号					//鼠标移除和聚焦的效果,不重要					$(this).mouseover(function() { //鼠标移开事件						tbBodyTr.each(function() { //编列tbody下的tr							var tds = $(this).find("td"); //获取列号为参数index的td对象集合							$(tds[thisIndex]).addClass("hover");						});					}).mouseout(function() { //鼠标聚焦时间						tbBodyTr.each(function() {							var tds = $(this).find("td");							$(tds[thisIndex]).removeClass("hover");						});					});					$(this).click(function() { //鼠标点击事件						var dataType = $(this).attr("type"); //获取当前点击列的 type						checkColumnValue(thisIndex, dataType); //对当前点击的列进行排序 (当前索引,排序类型)					});				});				//显示效果,不重要				$("tbody tr").removeClass(); //先移除tbody下tr的所有css类				$("tbody tr").mouseover(function() {					$(this).addClass("hover");				}).mouseout(function() {					$(this).removeClass("hover");				});				//对表格排序				function checkColumnValue(index, type) {					var trsValue = new Array(); //创建一个新的列表					tbBodyTr.each(function() { //遍历所有的tr标签						var tds = $(this).find('td'); //查找所有的 td 标签						//将当前的点击列 push 到一个新的列表中						//包括 当前行的 类型、当前索引的 值,和当前行的值						trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this)					.html());						$(this).html(""); //清空当前列					});					var len = trsValue.length; //获取所有要拍戏的列的长度					if (index == sortIndex) { //sortIndex =-1						trsValue.reverse(); //???					} else {						for (var i = 0; i < len; i++) { //遍历所有的行							type = trsValue[i].split(".separator")[0]; // 获取要排序的类型							for (var j = i + 1; j < len; j++) {								value1 = trsValue[i].split(".separator")[1]; //当前值								value2 = trsValue[j].split(".separator")[1]; //当前值的下一个								if (type == "number") {									//js 三元运算  如果 values1 等于 '' (空) 那么,该值就为0,否则 改值为当前值									value1 = value1 == "" ? 0 : value1;									value2 = value2 == "" ? 0 : value2;									//parseFloat() 函数可解析一个字符串,并返回一个浮点数。									//该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。									//如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN。									if (parseFloat(value1) > parseFloat(value2)) { //如果当前值 大于 下一个值										var temp = trsValue[j]; //那么就记住 大 的那个值										trsValue[j] = trsValue[i];										trsValue[i] = temp;									}								} else if (type == "ip") {									if (ip2int(value1) > ip2int(value2)) {										var temp = trsValue[j];										trsValue[j] = trsValue[i];										trsValue[i] = temp;									}								} else {									//JavaScript localeCompare() 方法 用本地特定的顺序来比较两个字符串。									//说明比较结果的数字。									// 如果 stringObject 小于 target,则 localeCompare() 返回小于 0 的数。									// 如果 stringObject 大于 target,则该方法返回大于 0 的数。									// 如果两个字符串相等,或根据本地排序规则没有区别,该方法返回 0。									if (value1.localeCompare(value2) > 0) { //该方法不兼容谷歌浏览器										var temp = trsValue[j];										trsValue[j] = trsValue[i];										trsValue[i] = temp;									}								}							}						}					}					for (var i = 0; i < len; i++) {						//将排序完的 值 插入到 表格中						//:eq(index) 匹配一个给定索引值的元素						$("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);						//console.log($("tbody tr:eq(" + i + ")").html())					}					sortIndex = index;				}				//IP转成整型 ?????				function ip2int(ip) {					var num = 0;					ip = ip.split(".");					//Number() 函数把对象的值转换为数字。					num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[						3]);					return num;				}			})		</script>	</body></html>

“html表格怎么排序”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. HTML表格模板
  2. html表格排序之完全详解

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html

上一篇:html网页中怎么设置背景图片

下一篇:如何使用html5实现表格与标题合并

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》