`

备忘——javascript操作表格排序

JavaScript 
阅读更多
表格排序，一般的处理方法是传递排序的字段到后台进行重新查询并排序，javascript也可以做到简单的表格排序，备忘代码：
<!---->           //类型转换器，将列的字段类型转换为可以排序的类型：String,int,float
            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();
                
                }
            }
            
            //排序函数产生器，iCol表示列索引，sDataType表示该列的数据类型
            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 sortTable(sTableID, iCol, sDataType) {
                var oTable = document.getElementById(sTableID);
                var oTBody = oTable.tBodies[0];
                var colDataRows = oTBody.rows;
                var aTRs = new Array;
                
                //将所有列放入数组
                for (var i=0; i < colDataRows.length; i++) {
                    aTRs[i] = colDataRows[i];
                }
                 
                //判断最后一次排序的列是否与现在要进行排序的列相同，是的话，直接使用reverse()逆序
                if (oTable.sortCol == iCol) {
                    aTRs.reverse();
                } else {
                    //使用数组的sort方法，传进排序函数
                    aTRs.sort(generateCompareTRs(iCol, sDataType));
                }
        
                var oFragment = document.createDocumentFragment();
                for (var i=0; i < aTRs.length; i++) {
                    oFragment.appendChild(aTRs[i]);
                }
       
                oTBody.appendChild(oFragment);
                //记录最后一次排序的列索引
                oTable.sortCol = iCol;
            }

完整例子：
<!----><html>
    <head>
    <title>Table Sort Example</title>
        <script type="text/javascript">
            
            //转换器，将列的字段类型转换为可以排序的类型：String,int,float
            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();
                
                }
            }
            
            //排序函数产生器，iCol表示列索引，sDataType表示该列的数据类型
            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 sortTable(sTableID, iCol, sDataType) {
                var oTable = document.getElementById(sTableID);
                var oTBody = oTable.tBodies[0];
                var colDataRows = oTBody.rows;
                var aTRs = new Array;
                
                //将所有列放入数组
                for (var i=0; i < colDataRows.length; i++) {
                    aTRs[i] = colDataRows[i];
                }
                 
                //判断最后一次排序的列是否与现在要进行排序的列相同，是的话，直接使用reverse()逆序
                if (oTable.sortCol == iCol) {
                    aTRs.reverse();
                } else {
                    //使用数组的sort方法，传进排序函数
                    aTRs.sort(generateCompareTRs(iCol, sDataType));
                }
        
                var oFragment = document.createDocumentFragment();
                for (var i=0; i < aTRs.length; i++) {
                    oFragment.appendChild(aTRs[i]);
                }
       
                oTBody.appendChild(oFragment);
                //记录最后一次排序的列索引
                oTable.sortCol = iCol;
            }

        </script>
    </head>
    <body>
        <p>Click on the table header to sort in ascending order.</p>
        <table border="1" id="tblSort">
            <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">Siblings</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Smith</td>
                    <td>John</td>
                    <td>7/12/1978</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>Johnson</td>
                    <td>Betty</td>
                    <td>10/15/1977</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>Henderson</td>
                    <td>Nathan</td>
                    <td>2/25/1949</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>Williams</td>
                    <td>James</td>
                    <td>7/8/1980</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>Gilliam</td>
                    <td>Michael</td>
                    <td>7/22/1949</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>Walker</td>
                    <td>Matthew</td>
                    <td>1/14/2000</td>
                    <td>3</td>
                </tr>
            </tbody>
        </table>        
    </body>
</html>



dennis 2007-03-10 17:26 发表评论
分享到：
| javascript之XML DOM对象
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    第9章 备忘录——文件操作1

    如果忘记关闭文件，可能会导致数据未完全写入，尤其是在写入操作时。`fclose` 会确保所有缓冲区的数据都被正确写入文件，然后释放文件句柄。 在 C 语言中，文件操作函数主要有以下几类： 1. 文件打开与关闭： - `...

    微信小程序——备忘录（截图+源码）.zip

    微信小程序——备忘录（截图+源码）.zip 微信小程序——备忘录（截图+源码）.zip 微信小程序——备忘录（截图+源码）.zip 微信小程序——备忘录（截图+源码）.zip 微信小程序——备忘录（截图+源码）.zip 微信小程序...

    Android源码——备忘录源码.zip

    这份“Android源码——备忘录源码.zip”压缩包很可能包含了一个完整的备忘录应用的源代码，对于学习Android开发，特别是对UI设计、数据存储和事件处理感兴趣的开发者来说，是一个宝贵的资源。下面我们将详细探讨这个...

    微信小程序项目实例——备忘录

    总结，这个“微信小程序项目实例——备忘录”涵盖了微信小程序的基础开发、前端设计、数据管理、用户交互等多个方面的知识点，为学习微信小程序开发提供了实用的示例。通过实践这样的项目，开发者可以深入理解微信小...

    上机备忘录.doc————电子版_doc版

    上机备忘录.doc————电子版_doc版

    微信小程序——[小工具类]备忘录（截图+源码）.zip

    微信小程序——[小工具类]备忘录（截图+源码）.zip 微信小程序——[小工具类]备忘录（截图+源码）.zip 微信小程序——[小工具类]备忘录（截图+源码）.zip 微信小程序——[小工具类]备忘录（截图+源码）.zip 微信小...

    小组开发环境搭建备忘——apache ftp cvs gnats samba

    【小组开发环境搭建备忘——Apache FTP CVS GNATS Samba】这篇文章主要讲述了如何构建一个适合小组开发的综合环境，涵盖了多个关键服务的设置和配置。以下是对各部分的详细解释： 1. **IP管理（DHCP）**：DHCP...

    android 应用 源代码——备忘录

    8. **序列化与反序列化**：在某些情况下，备忘录内容可能会以JSON或XML格式保存在文件中，需要进行序列化和反序列化操作。Gson库是一个常用的Java库，可以方便地实现对象到JSON字符串的转换。 9. **权限管理**：...

    常用javascript备忘册_v1.0

    除了这两个示例函数，JavaScript备忘册可能还包含了其他常用的功能，如字符串操作、数组处理、DOM操作、事件处理等常见知识点。字符串操作可能包括`substring`、`indexOf`等方法，数组处理可能涵盖`push`、`pop`、`...

    C# 备忘录（源码）——烽火系列

    【C# 备忘录（源码）——烽火系列】是一个C#编程语言开发的应用程序，主要用于创建、查看和管理个人备忘录。这款应用的设计思路非常适合初学者，因为它结合了实际项目开发与在线学习的过程。开发者在编写代码的过程...

    Android源码——备忘录源码.7z

    通过分析"Android源码——备忘录源码.7z"这个压缩包，我们可以深入理解Android开发中的重要概念。 首先，源码中的"源码说明.txt"可能包含关于项目背景、功能介绍和实现方法的概述，它是理解整个项目的关键。在...

    C语言程序设计——备忘录.txt

    C语言程序设计——备忘录.txt

    附件：树莓派自驾仪的开发备忘录——（GPS）UBLOX NEO-M8N UBX格式数据驱动初实现

    树莓派自驾仪的开发备忘录——（GPS）UBLOX NEO-M8N UBX格式数据驱动初实现的附件内容 https://blog.csdn.net/tsuibeyond/article/details/94991225

    s2sh框架实例——个人备忘录系统源码

    【标题】"s2sh框架实例——个人备忘录系统源码" 提供了一个学习和研究Web开发的宝贵资源，特别适合对Java Web技术感兴趣的初学者。S2SH是Struts2、Spring和Hibernate三个开源框架的组合，是Java领域广泛应用的MVC...

    html制作的备忘录html制作的备忘录

    4. **表格与列表**：如果备忘录涉及到任务分类或优先级，可能还会使用`&lt;table&gt;`元素创建表格，`&lt;tr&gt;`定义行，`&lt;td&gt;`定义单元格。或者，利用`&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`来创建定义列表，展示任务名称和描述。 5. **交互...

    健康驾驶备忘录——改、纠、调、检.docx

    【健康驾驶备忘录——改、纠、调、检】主要关注的是驾驶人员的健康问题，特别是对于长期驾车的职业驾驶员，这些保健措施显得尤为重要。在技术安全的角度看，良好的驾驶状态直接影响到行车安全，因此，改善驾驶环境和...

    常用javascript备忘册

    除此之外，JavaScript备忘册通常还会包含其他常见的功能，如字符串操作、数组处理、事件处理、DOM操作、AJAX请求等。比如，可能会有关于字符串格式化、数组排序、事件监听和触发、元素操作（如获取、设置属性、插入...

    1昆虫备忘录——学习ppt课件

    1昆虫备忘录——学习ppt课件

    备忘录（表格模板、DOC格式）.doc

    这份文档，"备忘录（表格模板、DOC格式）.doc"，显然提供了一个方便使用的表格模板，帮助用户创建和管理备忘录。以下是关于备忘录及其相关管理表格的一些详细知识点： 1. **备忘录定义**：备忘录（Memo）源自英文...

Magicbox
Global site tag (gtag.js) - Google Analytics