根据表格中的某一列进行排序的javascript代码

代码如下:

<script type="text/javascript">
var b = true ;
function sortAge(){
var tabNode = document.getElementsByTagName("table")[0];
var trNodes = tabNode.rows; //获取表格中的行对象
var arr = new Array();
for(var x=1;x<trNodes.length;x++){ //临时容器存入的是表格中行对象的引用
arr[x-1] = trNodes[x];
}
sort(arr);
var tbdNode = tabNode.childNodes[0];
if(b){ //if....else...控制按年龄的升降进行排序
for(var x=0;x<arr.length;x++){
tbdNode.appendChild(arr[x]);
}
b = false;
}else{
for(var x=arr.length-1;x>=0;x--){
tbdNode.appendChild(arr[x]);
}
b = true ;
}
}
function sort(arr){ // 排序
for(var x=0;x<arr.length;x++){
for(var y=x+1;y<arr.length;y++){
if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText)){ // 不进行parseInt转换是以字符串的ASCII比较
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
}
</script>

<style type="text/css">
table{ width:60%; border:solid 1px #0066FF;}
table td {border:solid 1px #0099ff;}
a{ text-decoration: none;}
</style>

</head>
<body>
<table>
<tr>
<td>姓名</td><td><a href="javascript:void(0)" onclick="sortAge()">年龄</a></td><td>地址</td>
</tr>
<tr>
<td>张三</td><td>23</td><td>北京</td>
</tr>
<tr>
<td>李四</td><td>25</td><td>上海</td>
</tr>
<tr>
<td>王五</td><td>15</td><td>广州</td>
</tr>
<tr>
<td>唐总</td><td>20</td><td>长沙</td>
</tr>
</table>
</body>

赞 (0)

相关推荐

  • javascript-表格排序(降序/反序)实现介绍(附图)

    javascript-表格排序(降序/反序)实现介绍(附图)

    知识点: Array方法: sort:降序 reverse:反序 效果:  代码: 复制代码 代码如下: <style> *{ margin: 0; padding: 0; } #tableSort{ line-height: 22px; background: #ccc; } #tableSort thead, #tableSort tfoot{ background: #066; color: #fff; font-size: 14px; } #tableSort thead a, #ta

  • JavaScript实现表格点击排序的方法

    本文实例讲述了JavaScript实现表格点击排序的方法.分享给大家供大家参考.具体分析如下: 这里实现基于JS的表格点击排序效果,可以根据表格内的数据大小自动按顺序排列,股票网站常会见到这种功能. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>表格排序</title> <

  • JavaScript实现表格排序方法

    JavaScript实现表格排序方法

    参考代码: 复制代码 代码如下: <!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-equ

  • javascript 表格内容排序 简单操作示例代码

    复制代码 代码如下: <div id="html"></div> <script> var listInfos = new Array(); listInfos[0] = new Array(); listInfos[0][0] = {'name':'推荐页1','DayCount':666,'AvgTime':29872,'ErrCount':180663,'ErrorRate':'2873%','DaySystemErrorCount':0,'D

  • javascript操作表格排序实例分析

    本文实例讲述了javascript操作表格排序的方法.分享给大家供大家参考.具体如下: 完整例子如下: <html> <head> <title>Table Sort Example</title> <script type="text/javascript"> //转换器,将列的字段类型转换为可以排序的类型:String,int,float function convert(sValue, sDataType) { swit

  • javascript多种数据类型表格排序代码分析

    中文汉字排序. 中英文混合排序. 数据大小排序. 文件类型排序(后缀名排序) 日期时间排序. 价格排序. 中文混合数字排序; 使用方法:文档载入后new tableListSort(arguments,arguments). 接受两个参数:第一个参数为必须的,可以是字符串ID,也可以是table对象;第二个可选参数,此参数为一个对象,{data:index,fileType:index,fn:function(){}}:对象有三个可选的属性,第一个和第二个为扩展排序的数据类型,第三个参数为排序后

  • JavaScript对表格或元素按文本，数字或日期排序的方法

    本文实例讲述了JavaScript对表格或元素按文本,数字或日期排序的方法.分享给大家供大家参考.具体实现方法如下: // Sorting table columns correctly by text, number or date. There are other // versions, plugins, etc., for this but they either are restricted to specific // date formats, or require EVERY r

  • JS实现的表格操作类详解(添加，删除，排序，上移，下移)

    JS实现的表格操作类详解(添加，删除，排序，上移，下移)

    本文实例讲述了JS实现的表格操作类.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css">*{font-size:14px}button{margin

  • javascript实现对表格元素进行排序操作

    javascript实现对表格元素进行排序操作

    我们在上网中都能看到很多能够排序的,如大小.时间.价格等 现在我们也试一下排序功能: 排序的函数代码:里面含有点击之后排序--还原,和排升序和降序. function sortAge(){ //对年龄进行排序,要先进行获得每一行对象,然后对象对象中的第一个(从0 开始)的大小进行排序 var tabNode = document.getElementById("tabid"); var rows0 = tabNode.rows; var rows1 = []; //现将元素拷贝一份出来

  • js实现表格字段排序

    1.比较函数生成器: 复制代码 代码如下: /** * 比较函数生成器 *  * @param iCol *            数据行数 * @param sDataType *            该行的数据类型 * @return */function  generateCompareTRs(iCol, sDataType) {     return   function  compareTRs(oTR1, oTR2) {        vValue1 = convert(oTR1.c

  • javascript实现表格排序 编辑 拖拽 缩放

    简单表格排序 可以双击编辑 自定义编辑后的 规则 可拖动列进行列替换 可推动边框进行列宽度的缩放 复制代码 代码如下: <!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/xht

  • 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; /**//*

  • JS学习之表格的排序简单实例

    JS学习之表格的排序简单实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input id="btn1" type="button" value="排序"> <table id="

随机推荐