js表格排序实例分析（支持int,float,date,string四种数据类型）
本文实例讲述了js表格排序的方法。分享给大家供大家参考。具体如下：
<html>
<head>
<title>SortTable2</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var k=0;
/**//**************************************************************************
排序的主方法，有三个形参，STableTd,iCol,sDataType分别为需要排序的表格ID，
需要排序的表格列号，所在列的数据类型（支持int,float,date,string四种数据类型)
**************************************************************************/
function sortTable(sTableId,iCol,sDataType)
{
var oTable=document.getElementById(sTableId);//获取表格的ID
var oTbody=oTable.tBodies[0]; //获取表格的tbody
var colDataRows=oTbody.rows; //获取tbody里的所有行的引用
var aTRs=new Array(); //定义aTRs数组用于存放tbody里的行
for(var i=0;i<colDataRows.length;i++) //依次把所有行放如aTRs数组
{
aTRs.push(colDataRows[i]);
}
/**//***********************************************************************
sortCol属性是额外给table添加的属性，用于作顺反两种顺序排序时的判断，区分
首次排序和后面的有序反转
************************************************************************/
if(oTable.sortCol==iCol) //非首次排序
{
aTRs.reverse();
}
else //首次排序
{
if(k%2==0) //升序
{
aTRs.sort(generateCompareTRs(iCol,sDataType));
}
else if(k%2==1) //降序
{
aTRs.sort(generateCompareTRs1(iCol,sDataType));
}
}
var oFragment=document.createDocumentFragment(); //创建文档碎片
for(var i=0;i<aTRs.length;i++) //把排序过的aTRs数组成员依次添加到文档碎片
{
oFragment.appendChild(aTRs[i]);
}
oTbody.appendChild(oFragment); //把文档碎片添加到tbody,完成排序后的显示更新
oTable.sortCol=iCol; //把当前列号赋值给sortCol,以此来区分首次排序和非首次排序,//sortCol的默认值为-1
};
//比较函数，用于两项之间的排序
//升序
function generateCompareTRs(iCol,sDataType)
{
return function compareTRs(oTR1,oTR2)
{
var vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
var vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
if(vValue1<vValue2)
{
return -1;
}
else if(vValue1>vValue2)
{
return 1;
}
else
{
return 0;
}
};
};
//降序
function generateCompareTRs1(iCol,sDataType)
{
return function compareTRs(oTR1,oTR2)
{
var vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
var vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
if(vValue1>vValue2)
{
return -1;
}
else if(vValue1<vValue2)
{
return 1;
}
else
{
return 0;
}
};
};
//数据类型转换函数
function convert(sValue,sDataType)
{
switch(sDataType)
{
case "int":return parseInt(sValue);
case "float": return parseFloat(sValue);
case "date":return new Date(Date.parse(sValue));
default:return sValue.toString();
}
};
</script>
</head>
<body>
<form name="f1" id="f1" action="" method="post">
<table border="1" id="tblSort" sortCol="-1">
<thead>
<tr>
<th onClick="sortTable('tblSort',0);" style="cursor:pointer">Last Name</th>
<th onClick="sortTable('tblSort',1)" style="cursor:pointer">First Name</th>
<th onClick="sortTable('tblSort',2,'date')" style="cursor:pointer">Birthday</th>
<th onClick="sortTable('tblSort',3,'int')" style="cursor:pointer">Silbings</th>
</tr>
</thead>
<tbody>
<tr>
<td>Simth</td>
<td>John</td>
<td>7/12/1978</td>
<td>50nGy/h</td>
</tr>
<tr>
<td>Johnson</td>
<td>Betty</td>
<td>5/12/1965</td>
<td>20nGy/h</td>
</tr>
<tr>
<td>Henderson</td>
<td>Nathan</td>
<td>10/15/1977</td>
<td>130nGy/h</td>
</tr>
<tr>
<td>Willianms</td>
<td>James</td>
<td>2/25/1949</td>
<td>10nGy/h</td>
</tr>
<tr>
<td>Gilliam</td>
<td>Michael</td>
<td>7/8/1980</td>
<td>140nGy/h</td>
</tr>
<tr>
<td>Walker</td>
<td>Matthew</td>
<td>6/18/1981</td>
<td>103nGy/h</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
javascript学习笔记(六) Date 日期类型
1.创建日期对象 复制代码 代码如下: var now = new Date(); //获得当前系统日期和时间 var someDate = new Date(Date.parse("May 25,2012")); var someDate = new Date("May 25,2012"); //与上相同 var someDate = new Date(Date.UTC(2010,0)); //GMT时间2010年1月1日凌晨0时 var someDate = n
-
让python json encode datetime类型
实现代码如下: 复制代码 代码如下: import json from datetime import date, datetime def __default(obj): if isinstance(obj, datetime): return obj.strftime('%Y-%m-%dT%H:%M:%S') elif isinstance(obj, date): return obj.strftime('%Y-%m-%d') else: raise TypeError('%r is not
-
Javascript中Date类型和Math类型详解
Date类型 ECMASCript中的Date类型是在早期中Java中的java.util.Date类基础上构建的.为此Date类型使用自UTC(国际协调时间)1970年1月1日午夜(0时)开始经过的毫秒数来保存日期. 创建日期对象 1.创建当前日期.不需要传入参数 2.创建指定日期.需要传入参数,必须传入表示该日期的毫秒数(即从1970年1月1日午夜起至该日期止经过的毫秒数).为了简化这一计算过程,ECMAScript提供了两个方法:Date.parse()和Date.UTC(). var n
-
javascript引用类型之时间Date和数组Array
Javascript引用类型之时间Date JavaScript中的Date类型是在早期Java中的java.util.Date类基础上构建的.为此,Date类型使用自UTC 1970年1月1日零时开始经过的毫秒数来保存日期.在使用这种数据存储格式的条件下,Date类型保存的日期能够精确到1970年1月1日之前或之后的285 616年. 创建日期对象 在javascript中,可以使用Date()构造函数来创建日期对象,如: 复制代码 代码如下: var date=new Date(); 当没有
-
简单谈谈javascript Date类型
1 创建一个新的日期对象,如果不带参数,则对象自动获得当前的日期和时间 var d = new Date() 2 如果需要指定特定的日期,则可以通过Date.parse() 或者 Date().UTC(),返回时间戳作为 new Date()的参数 Date.parse() 用法: var time = Date.parse('2015/05/20'); var newDate = new Date(time);//Wed May 20 2015 00:00:00 GMT+0800 (中国标准时
-
JavaScript:Date类型全面解析
创建一个日期对象,使用new操作符后跟Date的构造函数. var date = new Date(); 调用默认构造函数情况下,新创建的日期自动获得当前时间和日期.如果需要指定日期和时间,需要传入表示该日期的毫秒数. JavaScript中提供了两个方法来计算日期,Date.parse()方法接收一个表示日期的字符串参数,然后根据这个日期返回相应的日期毫秒数.但是日期的格式往往因实现以及地区而异.Date.UTC()也返回表示日期的毫秒数,它的参数分别是年份.基于0的月份(一月是0).月中的那
-
javascript中对Date类型的常用操作小结
javascript中对Date类型的常用操作小结 /** 3. * 日期时间脚本库方法列表: 4. * (1)Date.isValiDate:日期合法性验证 5. * (2)Date.isValiTime:时间合法性验证 6. * (3)Date.isValiDateTime:日期和时间合法性验证 7. * (4)Date.prototype.isLeapYear:判断是否闰年 8. * (5)Date.prototype.format:日期格式化 9. * (6)Date.stringToD
-
js表格排序实例分析（支持int,float,date,string四种数据类型）
本文实例讲述了js表格排序的方法.分享给大家供大家参考.具体如下: <html> <head> <title>SortTable2</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var k=0; /**//*
-
javascript操作表格排序实例分析
本文实例讲述了javascript操作表格排序的方法.分享给大家供大家参考.具体如下: 完整例子如下: <html> <head> <title>Table Sort Example</title> <script type="text/javascript"> //转换器,将列的字段类型转换为可以排序的类型:String,int,float function convert(sValue, sDataType) { swit
-
tablesorter.js表格排序使用方法(支持中文排序)
最近,因为项目需要,对表格排序做了一下摸索,整理如下: 1. 首先,可从官网下载tablesorter.js,但并不支持中文的排序,对其源码进行修改: 部分源码: function sortText(a, b) { return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }; function sortTextDesc(a, b) { return ((b < a) ? -1 : ((b > a) ? 1 : 0)); }; 修改后: function
-
jquery.tableSort.js表格排序插件使用方法详解
本文实例为大家分享了jquery.tableSort.js表格排序的具体代码,供大家参考,具体内容如下 1.一定要引jQuery包,所有jq插件都是基于jQuery包的 2.如果想指定哪一栏不排序这样写 $("#mytable").tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了 参考:http://www.jb51.net/article/105217.htm <!DOCTYPE html> &
-
TableSort.js表格排序插件使用方法详解
本文实例为大家分享了TableSort.js表格排序的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TableSort</title> <style type="text/css"> table { bor
-
定单管理上 JS表格排序第1/2页
自己经常用的比较好用的效果 经常用在定单管理上 JS表格排序 不需要用ASP再计算一次 var dom = (document.getElementsByTagName) ? true : false; var ie5 = (document.getElementsByTagName && document.all) ? true : false; var arrowUp, arrowDown; if (ie5 || dom) initSortTable(); function initS
-
JS中的四种数据类型判断方法
目录 1.typeof 2.instanceof 3.constructor 4.toString() 本文总结了四种判断方法: 1.typeof typeof是一个运算符,其有两种使用方式:(1)typeof(表达式); (2)typeof 变量名;返回值是一个字符串,用来说明变量的数据类型;所以可以用此来判断number, string, object, boolean, function, undefined, symbol 这七种类型,每种情况返回的内容如下表所示: // 字符串 con
-
C#数组反转与排序实例分析
本文实例分析了C#数组反转与排序的方法.分享给大家供大家参考.具体实现方法如下: C#数组反转 复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 数据反转 { class Program { static void Main(string[] args) {
-
JS继承用法实例分析
本文实例分析了JS继承的用法.分享给大家供大家参考.具体分析如下: 继承 : 子类不影响父类,子类可以继承父类的一些功能 ( 代码复用 ) 属性的继承 : 调用父类的构造函数 call 方法的继承 : for in : 拷贝继承 (jquery也是采用拷贝继承extend) 1. 拷贝继承 function Person (name){ this.name = name; } Person.prototype.showName =function (){ alert(this.name); }
-
JS高级运动实例分析
本文实例分析了JS高级运动.分享给大家供大家参考,具体如下: 一.链式运动框架 1.他需要一个回调函数,在运动停止时,开始下一次运动(执行函数) 多物体运动框架改为如下: function startMove(obj,attr,iTarget,fn){ ... if(iCur==iTarget){ clearInterval(obj.timer); fn(); }... }; 然后就可以用它,比如先变宽再变高最后变透明度 startMove(this,'width',300,function()