`
kfc_davy
  • 浏览: 178695 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

html table 排序

阅读更多

//使用的排序因子
var _SORT_FUNC=asc;
//被排序的列索引
var _CUR_COL_INDEX=0;
//顺序排序因子
function asc(a,b){
return a.localeCompare(b);
}
//倒序排序因子
function desc(a,b){
return a.localeCompare(b)*-1;
}
//更新全局参数
function updateGV(cIndex){
   if(cIndex!=_CUR_COL_INDEX){
   _CUR_COL_INDEX=cIndex;
   _SORT_FUNC=asc;
}else if(_SORT_FUNC==asc){
   _SORT_FUNC=desc;
}else{
   _SORT_FUNC=asc;
}
}
//主方法
function tableSort(cIndex){

var table = document.getElementById("t1");

updateGV(cIndex);
var sortArr=getColTextArr(table,cIndex);
sortArr.sort(_SORT_FUNC);
execTableSort(table,cIndex,sortArr);

setColor(table);
}
function setColor(table){
for(var i=table.rows.length-1;i>0;i--){
if(i%2==0)
   table.rows(i).bgColor='#BBBBBB';
    else
      table.rows(i).bgColor='#AAAAAA';
}
}
//获得某列文本的数组
function getColTextArr(table,cIndex){
var colTextArr=new Array();
for(var i=table.rows.length-1;i>0;i--){
   colTextArr.push(table.rows(i).cells[cIndex].innerText);
}
return colTextArr;
}
//执行排序操作
function execTableSort(table,cIndex,sortArr){
var aLen=sortArr.length;
var rLen=table.rows.length;
var row;
//遍历数组
for(var i=0;i<aLen;i++){
   //遍历i后的表行
   for(var j=i+1;j<rLen;j++){
    row=table.rows[j];
    if(row.cells[cIndex].innerText==sortArr[i]){
     if(i!=j)
      row.swapNode(table.rows(i+1));
     break;
    }
   }
}
}

<td align="center" title="单击排序" style="cursor:hand" onclick="tableSort(this.cellIndex);" nowrap  >
分享到:
评论

相关推荐

    html table列自定义排序排序

    table table自定义列排序;目前支持数值排序,文本(支持中文)排序; 示例: var option = { tableid: '#tableid', sortindex: 7, sorttype: "down", sortby: "text" }; $("#tableid").sortTable(option);

    html中table排序

    本软件主要是在html中进行table排序

    js对Table排序经典

    用js实现点击表头对Table排序,支持td中包含html标签,支持tr,td的原来样式不丢失,支持选择从第几行开始排序,支持时间,小数,整数和字符的排序

    html table 中文排序

    对html 的table 点击列标题进行排序

    html 表单排序

    html &lt;table&gt;表单的排序 html &lt;table&gt;表单的排序 html &lt;table&gt;表单的排序

    JavaScript html js Table排序

    程序的实现的是在客户端对表格进行排序,有以下特点: 1.自定义排序列、排序属性(例如innerHTML)、排序数据类型(包括int、float、date、string)、排序顺序(顺序和倒序); 2.自定义排序函数; 3.可同时设置...

    html_table_排序_jquery

    用jquery实现的html table排序,有箭头显示排序方向,非常简洁。但是要使用几十k的jquery文件。 ps:如果打不开zip,请用7-zip(免费软件),我使用这个工具压缩的。

    js 实现 table 行排序

    源码中有详细说明.sort_table.html 为示例html. 1.支持的排序数据类型有 Number,String,Date,NoCaseString 2.默认开始为升序,可指定为降序. 3.默认为只排序第一个tbody,可指定对所有tbody排序. 4.IE8 ,Firefox/3.6....

    html表格table的表头排序,js代码fastunit使用案例

    html表格table的表头排序,js代码fastunit使用案例

    table点击表头排序

    点击表头即可实现排序的代码./*table排序步骤 1、给排序的表格加id 2、标题栏加 3、排序的内容加 5、引入此js 6、在文档的末尾加入 [removed] var to = new TableOrder("idTable"), odID = to.creat({ type: "int", ...

    html table表单排序bydarkst_sort.js

    项目需要html表格有排序的功能,网上找了好多都不合适,而且用起来很麻烦,要加各种id, onclik,colum_index之类的,甚是麻烦,不就排个序嘛,还得话花时间学习怎么用你的js,学完发现还是有BUG.. 于是自己写了一个,...

    table上下排序

    js调整table行的上下顺序&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;html&gt; &lt;title&gt;Table test &lt;!-- td { text-align:center;font-size:12px;padding:3px;} --&gt; &lt;table id="table1" ...

    jQuery html表格排序插件tablesorter使用方法详解

    tablesort是一款很好用的jQuery表格排序插件。 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便。 使用jQuery tablesort实现html表格方法: ...2. 格式化需要排序的html表格: a.

    原生JS实现HTML- TABLE 自动行合并插件

    开发者提供已排序的数据列表以及需要合并行的列名即可,无需后端二次处理数据。 该类以纯原生JS编写,无需引入任何第三方库。 调用方法:new MergeRow(['col1','col2','col3'],data).renderTbl('td001'); 详情...

    html中table数据排序的js代码

    最近应项目要求,需要对table中的数据进行升序或降序排列,于是研究了一下js,希望对大家有帮助。

    jquery实现的table排序功能示例

    本文实例讲述了jquery实现的table排序功能。分享给大家供大家参考,具体如下: &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content=...

    HTML表格自动排序「HTML Table Auto Sort」-crx插件

    点击标记按照升序/降序重新排列HTML表的行数。 ###重要内容###启用后,点击表格标题(“ 支持语言:English

    JS实现table表格数据排序功能(可支持动态数据+分页效果)

    asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用...

    table的td整列拖动交换以及重新排列位置

    本javascript软件主要功能是任意拖动html的table的td来整行交换位置。

    javascript 写的给表单按列排序的东东,用过就知道什么是爽了

    解压出来运行samplecode.html就可看到效果,要把这些效果加入你的页面,你只要...step3:给要排序的table加上id="xxx" step4:定义排序列的数据类型 initTableWidget('xxx',0,0,Array('S','S','S',0),false); &lt;/script&gt;

Global site tag (gtag.js) - Google Analytics