html中table数据排序的js代码

 更新时间:2011年08月09日 23:33:22   作者:  
最近应项目要求,需要对table中的数据进行升序或降序排列,于是研究了一下js,希望对大家有帮助。
对了,注意那个innerText和innerHTML
复制代码 代码如下:

function sortCells(event) {
var obj = event.target;
var count = 0; count是记录点击次数的,根据奇偶进行升序或降序
if(!obj.getAttribute("clickCount")){
obj.setAttribute("clickCount", 0);
} else {
count = parseInt(obj.getAttribute("clickCount"));
count++;
obj.setAttribute("clickCount", count);
}
var table = event.target.parentNode.parentNode;
if(table.nodeName.localeCompare("THEAD") == 0){
if(table.parentNode.nodeName.localeCompare("TABLE") == 0){
table = table.parentNode;
} else {
return;
}
} else if(table.nodeName.localeCompare("TBODY") == 0){
if(table.parentNode.nodeName.localeCompare("TABLE") == 0){
table = table.parentNode;
} else {
return;
}
} else if(table.nodeName.localeCompare("TABLE") == 0){
} else {
return;
}
var colNum;
for(x = 0; x < table.rows(1).cells.length; x++){
if(event.target.innerText.localeCompare(table.rows(0).cells[x].innerText) == 0){
colNum = x;
break;
}
}
var column = table.rows(1).cells.length;
var row = table.rows.length;
var Ar = new Array(row - 1);
for (x = 0; x < row - 1; x++) {
Ar[x] = new Array(column);
}
for (x = 1; x < row; x++) {
for (y = 0; y < column; y++) {
Ar[x - 1][y] = table.rows(x).cells(y).innerHTML;
}
}
     //这个可以对字符串进行本地化排序
/* if((count%2) == 0){
Ar.sort(function(a, b) {
return b[colNum].localeCompare(a[colNum])
});
} else {
Ar.sort(function(a, b) {
return a[colNum].localeCompare(b[colNum])
});
} */
var temp;
for (x = 0; x < row - 1; x++) {
for (y = 1; y < row - 1; y++) {
temp = Ar[y - 1];
if((count % 2) == 0){
if (parseInt(Ar[y - 1][colNum]) >= parseInt(Ar[y][colNum])) {
Ar[y - 1] = Ar[y];
Ar[y] = temp;
}
} else {
if (parseInt(Ar[y - 1][colNum]) <= parseInt(Ar[y][colNum])) {
Ar[y - 1] = Ar[y];
Ar[y] = temp;
}
}
}
}
for (x = 1; x < row; x++) {
for (y = 0; y < column; y++) {
table.rows(x).cells(y).innerHTML = Ar[x - 1][y];
}
}
count++;
}

相关文章

  • javascript获取选中的文本的方法代码

    javascript获取选中的文本的方法代码

    这篇文章介绍了javascript获取选中的文本的方法代码,有需要的朋友可以参考一下
    2013-10-10
  • 基于replaceChild制作简单的吞噬特效

    基于replaceChild制作简单的吞噬特效

    本篇文章通过js和css结合实现简单的吞噬效果,代码简单易懂,需要的朋友可以参考下本文
    2015-09-09
  • JavaScript去除空格的三种方法(正则/传参函数/trim)

    JavaScript去除空格的三种方法(正则/传参函数/trim)

    个人认为去除空格最好的方法.采用的是正则表达式,这是最核心的原理,同时呢,还是有其他方法可以办到的,接下来将介绍一下三种方法(trim)空格,感兴趣的朋友可以了解下,或许对你有帮助呢
    2013-02-02
  • 11种ASP连接数据库的方法

    11种ASP连接数据库的方法

    这篇文章主要介绍了11种ASP连接数据库的方法,需要的朋友可以参考下
    2015-09-09
  • Bootstrap实现弹性搜索框

    Bootstrap实现弹性搜索框

    这篇文章主要介绍了Bootstrap实现弹性搜索框的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • JS实现数组去重复值的方法示例

    JS实现数组去重复值的方法示例

    这篇文章主要介绍了JS实现数组去重复值的方法,结合实例形式分析了JS通过数组遍历、运算等方法实现去重复值的操作技巧,需要的朋友可以参考下
    2017-02-02
  • 详解Javascript中的原型OOP

    详解Javascript中的原型OOP

    相信现在的很多程序员或多或少的都会写JS,大部分也知道JS是基于原型的语言,但是如果问及JS原生对象(Object,Function,Array,Date等)的这个原型链长什么样子?估计能回答出来的人就少了,所以这篇文章就给大家详细介绍下,有需要的可以参考借鉴。
    2016-10-10
  • JS和JQuery实现雪花飘落效果

    JS和JQuery实现雪花飘落效果

    本文主要给大家讲述了如何用JS和JQuery两种方式实现雪花飘落的动画效果,有需要的朋友收藏一下吧。
    2017-11-11
  • jsPDF生成pdf后在网页展示实例

    jsPDF生成pdf后在网页展示实例

    本文为大家介绍下jsPDF生成pdf后如何在网页展示,下面有个不错示例,大家可以参考下
    2014-01-01
  • js中的string.format函数代码

    js中的string.format函数代码

    js中的string.format函数代码,学习js的朋友可以参考下。
    2011-07-07

最新评论