`

js 手写table排序

    博客分类:
  • web
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>table order</title>
  <script type="text/javascript">
	function _order(_index,orderType){//param1:列标;param2:升序或降序排列
		var tabDiv = document.getElementById("tabDiv");
		var trs = tabDiv.getElementsByTagName("tr");
		var ot = "asc";
		if(orderType == "asc"){
			ot = "desc";
		}
		//从新设置点击th列头的click事件
		trs[0].getElementsByTagName("th")[parseInt(_index)]
		.setAttribute("onclick","_order('"+_index+"','"+ot+"')");
		//存取被排序列所有列值 ,元素格式 obj ={tr索引,列值}
		//列值用来排序,tr索引用来排序后找到对应tr
		var vals = [];
		for(var i=1;i<trs.length;i++){
			var tds = trs[i].getElementsByTagName("td");
			for(var j=0;j<tds.length;j++){
				if(j==_index){//只获取索引于被点击th索引相同的td,即同一列
					//获取对应元素
					var obj = {"trIndex":i,"tdVal":tds[j].innerHTML};
					vals.push(obj);
				}
			}
		}
		//判断排序方式
		if(orderType=="asc"){
			vals = array_order_asc(vals);
		}else{
			vals = array_order_desc(vals);
		}
		//排序后,重绘table
		var cont=trs[0].innerHTML;
		for(var k=0;k<vals.length;k++){
			cont +="<tr>"+trs[vals[k].trIndex].innerHTML+"</tr>";
		}
		var dv =document.getElementById("tabDiv");
		dv.innerHTML = "<table border='1' >"+cont+"</table>";
	}
	//排序 冒泡,只按td中字符的char值比较,中文不考虑
	//asc
	function array_order_asc(arr){
		for(var i=0;i<arr.length;i++){
			for(var j = 0;j<arr.length-i-1;j++){
				var size = arr[j].tdVal.length;
				if(arr[j+1].tdVal.length<size){//比较次数按列值最短的
					size = arr[j+1].tdVal.length;
				}
				for(var m = 0;m<size;m++){
					var char1 = arr[j].tdVal.charAt(m);
					var char2 = arr[j+1].tdVal.charAt(m);
					if(char1==char2){//对应位置字符相等,继续比较下一位
						continue;
					}
					if(char1>char2){
						var temp = arr[j];
						arr[j] = arr[j+1];
						arr[j+1] = temp;
					}
					break;
				}
			}
		}
		return arr;
	}
	//desc
	function array_order_desc(arr){
		for(var i=0;i<arr.length;i++){
			for(var j = 0;j<arr.length-i-1;j++){
				var size = arr[j].tdVal.length;
				if(arr[j+1].tdVal.length<size){
					size = arr[j+1].tdVal.length;
				}
				for(var m = 0;m<size;m++){
					var char1 = arr[j].tdVal.charAt(m);
					var char2 = arr[j+1].tdVal.charAt(m);
					if(char1==char2){
						continue;
					}
					if(char1<char2){
						var temp = arr[j];
						arr[j] = arr[j+1];
						arr[j+1] = temp;
					}
					break;
				}
			}
		}
		return arr;
	}
  </script>
 </head>

 <body>
	<div id="tabDiv" >
		<table border='1'>
			<tr>
				<th></th>
				<th onclick="_order('1','asc')" style="cursor:hand">a</th>
				<th onclick="_order('2','asc')" style="cursor:hand">b</th>
			</tr>
			<tr>
				<td>1</td>
				<td>shanghai</td>
				<td>one</td>
			</tr>
			<tr>
				<td>2</td>
				<td>beijing</td>
				<td>two</td>
			</tr>
			<tr>
				<td>3</td>
				<td>jinan</td>
				<td>three</td>
			</tr>
			<tr>
				<td>4</td>
				<td>qingdao</td>
				<td>four</td>
			</tr>
			<tr>
				<td>5</td>
				<td>guangzou</td>
				<td>five</td>
			</tr>
		</table>
	</div>
 </body>
</html>

1
1
分享到:
评论

相关推荐

    大屏手写table轮播表(vue)

    大屏手写table轮播表(vue)

    手写table 表格排序,固定列拖拉。 固定表头

    表格用法:$("#tableFixId).tableFixId({ tableParentDiv: $("#tableFixId"), //大容器 leftNum: 1, rightNum: 1, fixHead: "csFixed", footTable: 1, exparams: "input" })

    javascript 手写电子签名

    JavaScript手写电子签名技术是一种在Web应用中实现用户签名功能的方法,它允许用户通过鼠标或触摸设备在屏幕上绘制签名,并将其保存为图像。这一技术在电子商务、在线合同签署等领域广泛应用,提高了业务流程的效率...

    js手写输入在线搜索rar

    【标题】"js手写输入在线搜索rar" 涉及的主要知识点是JavaScript(JS)在实现手写输入和在线搜索功能方面的应用。这通常包括交互式用户界面的设计、事件处理、图像处理以及可能的数据存储和检索。 【描述】中的...

    js实现的带笔锋手写签名

    "js实现的带笔锋手写签名"是一个基于JavaScript技术,用于实现用户在Web页面上进行真实感的手写签名的功能。这个功能通常由HTML5提供支持,特别是其Canvas API,它允许我们在网页上进行动态图形绘制。 1. **...

    JS实现的手写输入

    JavaScript(简称JS)是一种广泛用于网页和网络应用的编程语言,尤其在客户端脚本中扮演着重要角色。本文将深入探讨如何使用JS实现手写输入的功能,包括全屏书写、语音读字、毛笔签名以及支持简繁英数标点等特性。 ...

    原生js手写tree树形分类选择插件

    "原生js手写tree树形分类选择插件"就是一个这样的例子,它允许用户通过树状结构来展示和操作数据,比如进行分类选择。这个插件利用了JavaScript的灵活性,结合jQuery库以增强DOM操作和事件处理,提供了高效且易于...

    存js手写数字键盘带小数点

    "存js手写数字键盘带小数点"的实现是为了解决这个问题,它提供了一个自定义的软键盘,用户可以点击弹出,并在输入框中输入带有小数点的数字。这个解决方案主要基于JavaScript、CSS和HTML技术,非常适合在微信或...

    浏览器js手写汉字

    "浏览器js手写汉字"这个主题涉及到的是如何利用JavaScript技术在浏览器环境中实现手写汉字的功能,同时考虑到跨浏览器兼容性,包括对Internet Explorer(IE)、Mozilla Firefox、Google Chrome以及360浏览器的支持。...

    手写签名js插件

    手写签名JS插件是一种基于JavaScript技术实现的交互式组件,专为电子设备(包括PC和移动设备)设计,提供用户在屏幕上进行手写签名的功能。这种插件在电子合同平台中尤为常见,因为它们能够方便用户在无纸化环境中...

    百度网页手写输入法

    “百度网页手写输入法”的hwInput.js文件就是用JavaScript编写的,它处理用户的手写输入事件,识别手写轨迹,并将其转化为文本。此外,JavaScript还负责管理多个输入框之间的交互逻辑,确保用户在不同输入框间流畅地...

    Promise_js手写promise_js手写Promise_手写Promise_JS手写Promise_

    在本文中,我们将深入探讨如何使用原生JavaScript手写Promise。 首先,我们需要理解Promise的基本概念。Promise有三种状态:pending(等待中)、fulfilled(已完成)和rejected(已拒绝)。每个Promise实例在其生命...

    js手写签名源代码含js文件

    JavaScript手写签名源...总的来说,这个"js手写签名源代码含js文件"项目涵盖了JavaScript编程、前端开发基础、Canvas绘图、数据传输、UI设计等多个方面的知识。理解并掌握这些知识点对于前端开发者来说是非常重要的。

    设计模式(简单工厂模式_排序)手写代码.rar

    在这个“设计模式(简单工厂模式_排序)手写代码.rar”压缩包中,我们可以期待看到作者针对简单工厂模式和排序算法的实现。简单工厂模式通常用于创建相似类型的对象,而排序则可能涉及到多种不同的算法,如冒泡排序、...

    漂亮的html 表格排序实现

    3. JavaScript或jQuery实现排序 要实现表格排序,我们需要监听表头单元格的点击事件,根据点击的列对数据进行排序,并重新渲染表格。这里可以使用原生JavaScript或者引入jQuery库来简化操作。以下是一个简单的...

    简单完整手写动画js

    【标题】"简单完整手写动画js" 涉及的知识点主要集中在JavaScript(js)编程语言上,尤其是关于创建动态效果和动画的部分。在Web开发中,JavaScript是一种不可或缺的客户端脚本语言,用于实现页面的交互性和动态功能...

    原生js 表单搜索text文本框支持手写输入法

    1. 第三方库:利用第三方库如IME.js、Handwriting.js等,它们提供了手写输入的接口,可以通过JavaScript调用并接收用户的手写输入。 2. Web组件:使用Web Components技术封装手写输入组件,与原生表单结合使用。...

    vxe-table vue表格解决方案 v4.5.20.zip

    《vxe-table:Vue.js表格解决方案深度解析》 在当今的Web开发中,表格作为一种重要的数据展示和交互组件,被广泛应用于各种业务场景。vxe-table是基于Vue.js框架的一个强大且灵活的表格解决方案,其版本v4.5.20在...

    PHP+JS+jSignature在线手写电子签名实例

    在这个技术实例中,我们将探讨如何使用PHP、JavaScript(JS)和jSignature库来实现一个在线手写电子签名的功能。jSignature是一个轻量级的JavaScript库,它允许用户在网页上进行手写签名,非常适合于电子商务、合同...

    可手写输入的下拉框,代码少,简单

    为了实现手写输入,开发者还需要熟悉JavaScript或者相关的前端框架,如jQuery、Vue.js或React.js,用于处理用户的交互事件和数据的动态更新。同时,可能需要引入第三方的手写识别库,如Tesseract.js或EasyOCR,它们...

Global site tag (gtag.js) - Google Analytics