`
your233
  • 浏览: 276645 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

javascript表格排序

阅读更多
//=====表格局部排序=====
//排序 tableId: 表的id,iCol:第几列 ;dataType:iCol对应的列显示数据的数据类型 
function sortTable(tableId, iCol, dataType){ 
    var table = document.getElementById(tableId); 
    var tbody = table.tBodies[0]; 
    var colRows = tbody.rows; 
    var aTrs = new Array; 
    var sortOrder = "asc";
    //将将得到的列放入数组,备用 
    for (var i=0; i < colRows.length-1; i++) { 
         aTrs[i] = colRows[i+1]; 
    } 
//判断上一次排列的列和现在需要排列的是否同一个,如果行数变了,
//则需要重新排序,而不是reverse。 
    if (table.sortCol == iCol) { 
        sortOrder = changeSortType(table.sortType);
        aTrs.sort(compareEle(iCol, dataType,sortOrder));
        //aTrs.reverse();
    } else { 
     //如果不是同一列,使用数组的sort方法,传进排序函数 
       aTrs.sort(compareEle(iCol, dataType,sortOrder)); 
    }          
    var oFragment = document.createDocumentFragment(); 
                
    for (var i=0; i < aTrs.length; i++) { 
        oFragment.appendChild(aTrs[i]);
    }                 
    tbody.appendChild(oFragment); 
    //记录最后一次排序的表格升降以及列索引
table.sortType = sortOrder; 
    table.sortCol = iCol; 
}
//改变排序类型
function changeSortType(type)
{
if(type=="desc"){
return "asc";
}
else
{
return "desc";
}
}  
//将列的类型转化成相应的可以排列的数据类型 
function convert(sValue, dataType) { 
     switch(dataType) { 
     case "int": 
         return parseInt(sValue); 
     case "float": 
         return parseFloat(sValue); 
     case "date": 
         return new Date(Date.parse(sValue)); 
     default: 
         return sValue.toString(); 
     } 

              
//排序函数,iCol表示列索引,dataType表示该列的数据类型 
function compareEle(iCol, dataType,sortType) { 
    return  function (oTR1, oTR2) { 
         var vValue1 = convert(getCellText(oTR1.cells[iCol]), dataType);
         var vValue2 = convert(getCellText(oTR2.cells[iCol]), dataType);
         if(sortType=="desc")
         {
         if (vValue1 > vValue2) { 
            return -1; 
     } else if (vValue1 < vValue2) { 
        return 1; 
     } else { 
        return 0; 
     }
         }
         else
         {
         if (vValue1 < vValue2) { 
            return -1; 
     } else if (vValue1 > vValue2) { 
        return 1; 
     } else { 
        return 0; 
     }
         }
    }; 
}

//获取某行该列的值
function getCellText(ob){ 
   if (ob.textContent != null) 
   return ob.textContent; 
   var s = ob.innerText; 
   return s.substring(0, s.length); 
}
分享到:
评论

相关推荐

    JavaScript 表格排序

    JavaScript 表格排序双击可进行按表格列排序

    Javascript表格排序大全

    JavaScript表格排序大全是一个涵盖多种JS表格排序实现方法的资源集合,旨在帮助开发者快速实现动态、交互式的表格数据排序功能。在网页开发中,表格是一种常用的数据展示方式,而JavaScript能够为表格提供强大的交互...

    javascript表格排序(顺序和逆序)并高亮显示

    总结来说,实现JavaScript表格排序并高亮显示的关键在于理解DOM操作、数组排序以及CSS样式的应用。通过编写比较函数、遍历和排序表格行,以及更新单元格样式,我们可以创建出具有动态排序和高亮功能的表格。这个过程...

    javascript表格排序案例(面向对象)案例资料

    通过以上步骤,你将能够构建一个功能完善的JavaScript表格排序功能,同时利用面向对象编程的思想提高了代码的可维护性和复用性。在学习这个案例资料时,务必仔细研究每个部分,理解其背后的逻辑,并尝试自己动手实践...

    很灵活的javascript 表格排序 功能强大 可自定义排序规则

    JavaScript表格排序是一个在网页开发中常见的需求,尤其是在处理大量数据时。这个功能强大的JavaScript库,被称为"sorttable",能够帮助开发者轻松实现表格数据的排序,同时提供了自定义排序规则的能力,大大增强了...

    javascript 表格排序多种数据类型排序(中文混合数字排序).zip

    总结来说,处理JavaScript表格中中文混合数字的排序需要自定义排序函数,该函数能区分并适当地处理不同数据类型。通过这样的方法,我们可以确保数据在展示时始终按预期的方式排序,提供良好的用户体验。这个压缩包...

    Auntion-TableSort国人写的一个javascript表格排序的东西.docx

    ### Auntion-TableSort:一款国人开发的JavaScript表格排序工具 #### 一、概述 Auntion-TableSort是一款由国人开发的JavaScript表格排序插件,它能够方便地实现对HTML表格中的数据进行排序操作。该插件不仅适用于...

    网页模板——javascript 表格排序多种数据类型排序(中文混合数字排序).zip

    网页模板——javascript 表格排序多种数据类型排序(中文混合数字排序)

    javaScript对表格排序

    总结起来,这个JavaScript表格排序示例展示了如何通过监听表头点击事件,使用纯JavaScript实现表格数据的动态排序。它依赖于HTML表格结构,通过JavaScript操作DOM节点进行数据比较和位置交换。在实际项目中,可以...

    javaScript表格排序,

    内涵表格排序代码, 支持string number, 不支持date类型。

    JavaScript实现表格排序,点击表头切换升序降序,非常简单

    &lt;title&gt;JavaScript表格排序 table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; } th { cursor: pointer; } (0)"&gt;...

    JavaScript表格排序

    表格排序 是Javascript实现, 就目前我看,是最好的排序实现。 可以排序:数字,日期,字母。 只需要两句话实现多种排序功能。 &lt;script type="text/javascript"&gt; var sorter=new table.sorter("tableId"); sorter....

    JavaScript实现表格排序

    而JavaScript实现的表格排序功能则能够帮助用户更方便地管理和理解这些数据。这篇我们将深入探讨如何使用JavaScript实现表格排序,包括对数字、日期和汉字的排序。 首先,我们需要理解HTML表格的基本结构,通常由`...

    33种Javascript 表格排序控件收集

    以下是对33种JavaScript表格排序控件的详细说明: 1. jQuery tablesorter(1):这是一个基于jQuery的插件,支持多种类型的排序,包括数字、日期和自定义排序。它具有高度可定制性,允许用户添加自定义排序标志和...

    纯js实现点击表头排序,轻量级JavaScript表格内容排序代码

    这个轻量级的JavaScript表格排序实现非常实用,特别适合小型项目或对性能要求高的场景。它可以避免引入大型库的开销,同时也易于理解和维护。当然,对于更复杂的需求,例如处理日期或对象排序,可能需要进一步扩展这...

    JavaScript表格排序,点击表头即可排序

    内容索引:脚本资源,Ajax/JavaScript,表格排序,表头 JavaScript表格排序,点击表头即可排序,此脚本支持中文汉字排序、中英文混合排序、数据大小排序、文件名称类型排序、日期排序、价格排序、中文和数字排序;...

    Blue Table,Js表格排序插件

    **Blue Table:JavaScript表格排序插件** 在网页开发中,数据展示经常需要用到表格,而对表格数据进行排序是用户交互中的常见需求。Blue Table是一款基于JavaScript的表格排序插件,它能够帮助开发者轻松实现表格...

Global site tag (gtag.js) - Google Analytics