JS表格排序

最新推荐文章于 2022-04-02 21:27:14 发布
最新推荐文章于 2022-04-02 21:27:14 发布
阅读量598 收藏 1
点赞数 
(function($){
	//插件
	$.extend($,{
		//命名空间
		sortTable:{
			sort:function(tableId,Idx){
				var table = document.getElementById(tableId);
				var tbody = table.tBodies[0];
				var tr = tbody.rows; 
		
				var trValue = new Array();
				for (var i=0; i<tr.length; i++ ) {
					trValue[i] = tr[i];  //将表格中各行的信息存储在新建的数组中
				}
		
				if (tbody.sortCol == Idx) {
					trValue.reverse(); //如果该列已经进行排序过了，则直接对其反序排列
				} else {
					//trValue.sort(compareTrs(Idx));  //进行排序
					trValue.sort(function(tr1, tr2){
						var value1 = tr1.cells[Idx].innerHTML;
						var value2 = tr2.cells[Idx].innerHTML;
						return value1.localeCompare(value2);
					});
				}
		
				var fragment = document.createDocumentFragment();  //新建一个代码片段，用于保存排序后的结果
				for (var i=0; i<trValue.length; i++ ) {
					fragment.appendChild(trValue[i]);
				}
		
				tbody.appendChild(fragment); //将排序的结果替换掉之前的值
				tbody.sortCol = Idx;
			}
		}
	});		  
})(jQuery);


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自定义表格排序(JS)</title>
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript" src="code.js"></script>
<style type="text/css">
	* {
		padding:0;
		margin:0;
	}

	body {
		font-family:verdana;
		font-size:12px;
	}

	.content {
		width:550px;
		margin:20px auto;
	}

	.content h1 {
		font-family:'微软雅黑';
		font-size:18px;
		padding-bottom:5px;
	}

	table {
		width:100%;
	}

	th, td {
		padding:6px 0;
		text-align:center;
	}

	th {
		background-color:#007D28;
		color:#ffffff;
	}
	
	tr {
		background-color:#E8FFE8;
	}
	
	.odd {
		background-color:#FFF3EE;
	}
	
	.highlight {
		background-color:#FFF3EE;
}

</style>
</head>

<body>
<table summary="user infomation table" id="tableSort">
		<thead>
			<tr>
				<th οnclick="$.sortTable.sort('tableSort',0)" style="cursor: pointer;">会员ID</th>
				<th οnclick="$.sortTable.sort('tableSort',1)" style="cursor: pointer;">会员名</th>
				<th οnclick="$.sortTable.sort('tableSort',2)" style="cursor: pointer;">邮箱</th>
				<th οnclick="$.sortTable.sort('tableSort',3)" style="cursor: pointer;">会员组</th>
				<th οnclick="$.sortTable.sort('tableSort',4)" style="cursor: pointer;">城市</th>
				<th οnclick="$.sortTable.sort('tableSort',5)" style="cursor: pointer;">注册时间</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>126</td>
				<td>webw3c</td>
				<td>este@126.com</td>
				<td>普通会员</td>
				<td>北京</td>
				<td>2011-04-13</td>
			</tr>
			<tr>
				<td>145</td>
				<td>test001</td>
				<td>test001@126.com</td>
				<td>中级会员</td>
				<td>合肥</td>
				<td>2011-03-27</td>
			</tr>
			<tr>
				<td>116</td>
				<td>wuliao</td>
				<td>wuliao@126.com</td>
				<td>普通会员</td>
				<td>南昌</td>
				<td>2011-04-01</td>
			</tr>
			<tr>
				<td>129</td>
				<td>tired</td>
				<td>tired@126.com</td>
				<td>中级会员</td>
				<td>北京</td>
				<td>2011-04-06</td>
			</tr>
			<tr>
				<td>155</td>
				<td>tiredso</td>
				<td>tireds0@126.com</td>
				<td>中级会员</td>
				<td>武汉</td>
				<td>2011-04-06</td>
			</tr>
			<tr>
				<td>131</td>
				<td>javascript</td>
				<td>js2011@126.com</td>
				<td>中级会员</td>
				<td>武汉</td>
				<td>2011-04-08</td>
			</tr>
			<tr>
				<td>132</td>
				<td>jQuery</td>
				<td>jQuery@126.com</td>
				<td>高级会员</td>
				<td>北京</td>
				<td>2011-04-12</td>
			</tr>
		</tbody>
	</table>
</body>
</html>


猿视线
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js表格排序、支持中文、日期、英文、数值排序
07-27
收集起来js表格排序、支持中文、日期、英文、数值排序，多个Javascript表格排序方法，完美解决
JavaScript实现表格排序
05-20 1421
Table sorter包括JavaScript和一点CSS，能够让原始的html table变得可以分别按照各栏数据值，对各行排序。 效果 在表头任意一个栏目中点击一下，下面各行将按照此栏目值的升序排序 按照字符串比较来确定顺序 再次点击该栏目，变更为降序排序 点击其它栏目，则按其它栏目的值重新排序 注意，排序时，栏目奇偶行的背景色保持奇数白色、偶数浅灰色 要求 不能改动原html...
用js实现table排序
08-02 6729
关于js实现table排序的问题！问题描述：           或许大家都碰到过这样一个问题，从数据库中得到一系列的数据，显示在页面上，有时候根据客服的要求我们需要对显示出来的数据进行实时排序（有n行n列，当点击其中一行头的时候所用数据按此列升序或者降序排列），当然从数据库中去数据然后进行排无愧是其中一个办法，但是试想一下，每次排序都要进行数据库查询，不但加重了服务器端的负担，响
JavaScript入门（二）
jiangtea的博客
07-25 342
1、标签<thead>和<tbody>的使用，实现不同行不同颜色：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ var tb
JavaScript学习笔记（二）
weixin_30547797的博客
05-05 176
DOM基础概念、操作 DOM概念 DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型...
js 表格排序(编辑+拖拽+缩放)
12-08
Table body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/...
js实现表格字段排序
10-26
本篇文章只要是对js表格字段排序的实例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
JavaScript实现表格排序方法
10-27
JavaScript实现表格排序方法，需要的朋友可以参考一下
TableSort.js表格排序插件使用方法详解
01-19
本文实例为大家分享了TableSort.js表格排序的具体代码，供大家参考，具体内容如下 <html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>TableSort&...
JavaScript实现表格排序，点击表头切换升序降序，非常简单
08-27
使用JavaScript实现表格排序，点击表头切换升序降序，非常简单
sort.js实现table表单点击列名排序
10-28
table列点击排序功能JS实现，表单table显示的时候，点击表单列名实现升序以及降序功能！
【前端实例】JavaScript对Table数据进行排序操作
LaoYe的博客
03-11 7006
【提出需求】 点击表格头部的时候根据对应列的所有值来进行排序，最终显示排序后的数据行。 【具体效果】 【步骤思路】 点击需要排序列的数据头，获取数据头所在列的索引。通过索引找到每一行所对应列的数据，之后对该列的所有数据进行排序（本实例只进行降序排列），排序结果的每个数据的索引就是该数据所对应行的位置。 【问题解决】 1、如何知道那一列需要排...
js复习笔记(忘记tbodies)
jingtian678的博客
05-17 1442
隔行变色 *{margin: 0;padding: 0;} div { width: 387px; margin: 20px auto; } table { text-align: center; margin: 0 auto; } th { width: 100px; line-height: 20px; height: 20px; } td { wi
纯原生JS操作table，根据某列数据进行升序或降序重新排列table表格
ma_luping的博客
10-27 1521
HTML代码： <table border="1" style="width:300px" align="center"> <thead> <th>姓名</th> <th>性别</th> <th>日期</th> </thead> <tbody class="cont.
element table升降序
海北军
03-28 778
<el-table type="selection" :data="tableData" border @sort-change="getOrder" > <el-table-column prop="percent_sales" label="销售额 / 占比" :sortable="true" ></el-table-column&gt...
table 的tBodies
ISaiSai的专栏
10-02 8420
a.tBodies[0].rows[0].cells[0] 一个table 可以有多个 tbody
javaScript小案例------js实现动态排序表格效果篇
前端叶荨，随手记
04-02 2302
javaScript小案例------js动态排序表格篇 原生js实现动态排序表格
js 表格排序序号自增
最新发布
05-19
假设你有一个表格，其中一列需要根据它的值进行排序，并且你希望另一列中的序号自动递增。可以使用以下代码来实现： ```javascript // 获取表格元素 var table = document.getElementById("myTable"); // 获取表格中需要排序的列 var column = 1; // 获取需要递增序号的列 var indexColumn = 0; // 获取表格中的所有行 var rows = table.getElementsByTagName("tr"); // 将行转换为数组以便排序 var rowsArray = Array.prototype.slice.call(rows, 1); // 对行进行排序 rowsArray.sort(function(a, b) { var aValue = a.getElementsByTagName("td")[column].textContent; var bValue = b.getElementsByTagName("td")[column].textContent; return aValue.localeCompare(bValue); }); // 将排序后的行重新添加到表格中 for (var i = 0; i < rowsArray.length; i++) { rowsArray[i].getElementsByTagName("td")[indexColumn].textContent = i + 1; table.appendChild(rowsArray[i]); } ``` 这段代码做了以下几件事情： 1. 获取表格元素和需要排序的列、需要递增序号的列。 2. 获取表格中的所有行，并将它们转换为数组以便排序。 3. 对行进行排序，这里使用了 `localeCompare()` 方法来比较字符串。 4. 将排序后的行重新添加到表格中，并递增相应的序号。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值