<!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>
分享到：
相关推荐
大屏手写table轮播表（vue）
表格用法：$("#tableFixId).tableFixId({ tableParentDiv: $("#tableFixId"), //大容器 leftNum: 1, rightNum: 1, fixHead: "csFixed", footTable: 1, exparams: "input" })
JavaScript手写电子签名技术是一种在Web应用中实现用户签名功能的方法，它允许用户通过鼠标或触摸设备在屏幕上绘制签名，并将其保存为图像。这一技术在电子商务、在线合同签署等领域广泛应用，提高了业务流程的效率...
【标题】"js手写输入在线搜索rar" 涉及的主要知识点是JavaScript（JS）在实现手写输入和在线搜索功能方面的应用。这通常包括交互式用户界面的设计、事件处理、图像处理以及可能的数据存储和检索。 【描述】中的...
"js实现的带笔锋手写签名"是一个基于JavaScript技术，用于实现用户在Web页面上进行真实感的手写签名的功能。这个功能通常由HTML5提供支持，特别是其Canvas API，它允许我们在网页上进行动态图形绘制。 1. **...
JavaScript（简称JS）是一种广泛用于网页和网络应用的编程语言，尤其在客户端脚本中扮演着重要角色。本文将深入探讨如何使用JS实现手写输入的功能，包括全屏书写、语音读字、毛笔签名以及支持简繁英数标点等特性。 ...
"原生js手写tree树形分类选择插件"就是一个这样的例子，它允许用户通过树状结构来展示和操作数据，比如进行分类选择。这个插件利用了JavaScript的灵活性，结合jQuery库以增强DOM操作和事件处理，提供了高效且易于...
"存js手写数字键盘带小数点"的实现是为了解决这个问题，它提供了一个自定义的软键盘，用户可以点击弹出，并在输入框中输入带有小数点的数字。这个解决方案主要基于JavaScript、CSS和HTML技术，非常适合在微信或...
"浏览器js手写汉字"这个主题涉及到的是如何利用JavaScript技术在浏览器环境中实现手写汉字的功能，同时考虑到跨浏览器兼容性，包括对Internet Explorer（IE）、Mozilla Firefox、Google Chrome以及360浏览器的支持。...
手写签名JS插件是一种基于JavaScript技术实现的交互式组件，专为电子设备（包括PC和移动设备）设计，提供用户在屏幕上进行手写签名的功能。这种插件在电子合同平台中尤为常见，因为它们能够方便用户在无纸化环境中...
“百度网页手写输入法”的hwInput.js文件就是用JavaScript编写的，它处理用户的手写输入事件，识别手写轨迹，并将其转化为文本。此外，JavaScript还负责管理多个输入框之间的交互逻辑，确保用户在不同输入框间流畅地...
在本文中，我们将深入探讨如何使用原生JavaScript手写Promise。 首先，我们需要理解Promise的基本概念。Promise有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。每个Promise实例在其生命...
JavaScript手写签名源...总的来说，这个"js手写签名源代码含js文件"项目涵盖了JavaScript编程、前端开发基础、Canvas绘图、数据传输、UI设计等多个方面的知识。理解并掌握这些知识点对于前端开发者来说是非常重要的。
在这个“设计模式(简单工厂模式_排序)手写代码.rar”压缩包中，我们可以期待看到作者针对简单工厂模式和排序算法的实现。简单工厂模式通常用于创建相似类型的对象，而排序则可能涉及到多种不同的算法，如冒泡排序、...
3. JavaScript或jQuery实现排序 要实现表格排序，我们需要监听表头单元格的点击事件，根据点击的列对数据进行排序，并重新渲染表格。这里可以使用原生JavaScript或者引入jQuery库来简化操作。以下是一个简单的...
【标题】"简单完整手写动画js" 涉及的知识点主要集中在JavaScript（js）编程语言上，尤其是关于创建动态效果和动画的部分。在Web开发中，JavaScript是一种不可或缺的客户端脚本语言，用于实现页面的交互性和动态功能...
《vxe-table：Vue.js表格解决方案深度解析》 在当今的Web开发中，表格作为一种重要的数据展示和交互组件，被广泛应用于各种业务场景。vxe-table是基于Vue.js框架的一个强大且灵活的表格解决方案，其版本v4.5.20在...
在这个场景中，我们关注的是一个实现手写输入功能的JavaScript源码，它能够帮助开发者在网页上集成这种功能。 首先，我们需要理解JavaScript的基本概念。JavaScript是一种广泛使用的脚本语言，主要应用于Web开发，...
在实际开发中，我们可以使用JavaScript库，如Hammer.js，来简化触摸事件的处理，同时结合CSS3的transform属性来实现平滑的动画效果。此外，为了优化性能，可能需要使用虚拟列表（Virtual Scrolling）技术，只渲染...
在这个技术实例中，我们将探讨如何使用PHP、JavaScript（JS）和jSignature库来实现一个在线手写电子签名的功能。jSignature是一个轻量级的JavaScript库，它允许用户在网页上进行手写签名，非常适合于电子商务、合同...