`

表格排序

JavaScriptHTML 
阅读更多
 
  1. <html>  
  2.     <head>  
  3.     <title>Table Sort Example</title>  
  4.         <script type="text/javascript">  
  5.             function convert(sValue, sDataType) {  
  6.                 switch(sDataType) {  
  7.                     case "int":  
  8.                         return parseInt(sValue);  
  9.                     case "float":  
  10.                         return parseFloat(sValue);  
  11.                     case "date":  
  12.                         return new Date(Date.parse(sValue));  
  13.                     default:  
  14.                         return sValue.toString();  
  15.                   
  16.                 }  
  17.             }  
  18.           
  19.             function generateCompareTRs(iCol, sDataType) {  
  20.                 return  function compareTRs(oTR1, oTR2) {  
  21.                             var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);  
  22.                             var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);  
  23.                             if (vValue1 < vValue2) {  
  24.                                 return -1;  
  25.                             } else if (vValue1 > vValue2) {  
  26.                                 return 1;  
  27.                             } else {  
  28.                                 return 0;  
  29.                             }  
  30.                         };  
  31.             }  
  32.              
  33.             function sortTable(sTableID, iCol, sDataType) {  
  34.                 var oTable = document.getElementById(sTableID);  
  35.                 var oTBody = oTable.tBodies[0];  
  36.                 var colDataRows = oTBody.rows;  
  37.                 var aTRs = new Array;  
  38.                 for (var i=0; i < colDataRows.length; i++) {  
  39.                     aTRs[i] = colDataRows[i];  
  40.                 }  
  41.   
  42.                 if (oTable.sortCol == iCol) {  
  43.                     aTRs.reverse();  
  44.                 } else {  
  45.                     aTRs.sort(generateCompareTRs(iCol, sDataType));  
  46.                 }  
  47.   
  48.                 var oFragment = document.createDocumentFragment();  
  49.                 for (var i=0; i < aTRs.length; i++) {  
  50.                     oFragment.appendChild(aTRs[i]);  
  51.                 }  
  52.                 oTBody.appendChild(oFragment);  
  53.                 oTable.sortCol = iCol;  
  54.             }  
  55.         </script>  
  56.     </head>  
  57.     <body>  
  58.         <p>Click on the table header to sort in ascending order.</p>  
  59.         <table border="1" id="tblSort">  
  60.             <thead>  
  61.                 <tr>  
  62.                     <th onclick="sortTable('tblSort', 0)"   
  63.                         style="cursor:pointer">Last Name</th>  
  64.                     <th onclick="sortTable('tblSort', 1)"   
  65.                         style="cursor:pointer">First Name</th>  
  66.                     <th onclick="sortTable('tblSort', 2, 'date')"   
  67.                         style="cursor:pointer">Birthday</th>  
  68.                     <th onclick="sortTable('tblSort', 3, 'int')"   
  69.                         style="cursor:pointer">Siblings</th>  
  70.                 </tr>  
  71.             </thead>  
  72.             <tbody>  
  73.                 <tr>  
  74.                     <td>Smith</td>  
  75.                     <td>John</td>  
  76.                     <td>7/12/1978</td>  
  77.                     <td>2</td>  
  78.                 </tr>  
  79.                 <tr>  
  80.                     <td>Johnson</td>  
  81.                     <td>Betty</td>  
  82.                     <td>10/15/1977</td>  
  83.                     <td>4</td>  
  84.                 </tr>  
  85.                 <tr>  
  86.                     <td>Henderson</td>  
  87.                     <td>Nathan</td>  
  88.                     <td>2/25/1949</td>  
  89.                     <td>1</td>  
  90.                 </tr>  
  91.                 <tr>  
  92.                     <td>Williams</td>  
  93.                     <td>James</td>  
  94.                     <td>7/8/1980</td>  
  95.                     <td>4</td>  
  96.                 </tr>  
  97.                 <tr>  
  98.                     <td>Gilliam</td>  
  99.                     <td>Michael</td>  
  100.                     <td>7/22/1949</td>  
  101.                     <td>1</td>  
  102.                 </tr>  
  103.                 <tr>  
  104.                     <td>Walker</td>  
  105.                     <td>Matthew</td>  
  106.                     <td>1/14/2000</td>  
  107.                     <td>3</td>  
  108.                 </tr>  
  109.             </tbody>  
  110.         </table>          
  111.     </body>  
  112. </html>  
  113.  

  • 注意:  
  • 1.有时td里面东西封装了，js会报错，此时需要在td里面加一些东西，比如说&nbsp；  
  • 2.汉字不能进行排序，只能颠倒顺序.  
  • 3.日期排序需要按照上面的格式显示
分享到：
| 在js中使用正则表达式
评论
发表评论

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

相关推荐

    jquery实现表格排序

    ### jQuery 实现表格排序 #### 知识点一：jQuery表格排序插件介绍 在Web开发中，数据展示经常需要通过表格的形式呈现给用户，并且为了方便用户查找所需信息，通常会提供排序功能。传统的表格排序往往需要后端的...

    jQuery Table表格排序显示代码.zip

    本资源“jQuery Table表格排序显示代码.zip”聚焦于利用jQuery实现动态表格排序的功能，这对于数据展示和用户交互至关重要。下面将详细阐述相关知识点。 1. **jQuery基础**：首先，理解jQuery的基础是至关重要的。...

    易语言高级表格排序示例.e

    易语言高级表格排序示例,程序模仿易语言例程里面的高级列表框排序写成.

    JavaScript实现表格排序

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

    android 表格 排序 源码

    本示例项目“android 表格 排序 源码”提供了实现Android表格排序功能的完整源码，用户可以点击表头对表格中的数据进行升序或降序排序。下面我们将详细讲解这个功能实现的关键知识点。 1. **使用GridView或...

    html表格排序资源

    jquery-tablesort则是一个独立于jQuery的表格排序库，它提供了类似的功能，但不依赖于jQuery。这意味着如果你的项目不使用jQuery或者希望减少依赖，这个库是个不错的选择。jquery-tablesort同样支持多种数据类型的...

    javaScript对表格排序

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

    jquery的表格排序插件

    表格排序对于数据展示和分析尤其重要，特别是在数据量较大的情况下。 在描述中提到的“博文链接：https://liu346435400.iteye.com/blog/1130963”，这可能是一个博客文章，详细介绍了如何使用特定的jQuery表格排序...

    表格排序和表头浮动

    "表格排序和表头浮动"就是一个这样的功能组合，它使得用户能更方便地浏览和理解大量数据。 表格排序是指用户可以通过点击表格列头来按该列的数据进行升序或降序排列。这个功能对于处理大量结构化数据非常有用，比如...

    Blue Table，Js表格排序插件

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

    一个表格排序程序

    源码是软件开发的基础，通过查看和理解源码，开发者可以学习到如何用JavaScript实现表格排序功能，包括数据处理、事件监听、DOM操作等技术。 “工具”标签则表明这是一个开发者使用的辅助工具，可以帮助他们在自己...

    Jquery表格排序(支持中文)

    表格排序通常用于显示大量结构化数据，并允许用户根据需要对数据进行升序或降序排列。在中文环境下，排序需要考虑中文字符的Unicode编码顺序，确保排序的准确性。 ### 3. 实现思路 - 首先，我们需要一个包含表格...

    表格排序插件

    《表格排序插件详解及其应用》 在网页开发中，数据展示往往离不开表格。而当表格数据量较大或者需要频繁进行动态排序时，一个高效、易用的表格排序插件就显得尤为重要。本文将深入探讨“表格排序插件”，特别是以...

    仿excle表格排序效果

    Excel因其强大的数据处理和可视化能力而备受青睐，因此在网页或应用程序中模拟其某些特性，如表格排序，能极大地提升用户体验。在这个"仿excle表格排序效果"的项目中，我们将探讨如何实现点击表头进行按列排序的功能...

    javascript带箭头的表格排序实例

    在JavaScript编程中，实现带箭头的表格排序是一种常见的需求，尤其在数据展示和交互式网页设计中。本文将深入探讨如何使用JavaScript实现这一功能，包括理解基础的HTML表格结构、CSS样式设置以及JavaScript事件处理...

    漂亮的html 表格排序实现

    要实现“漂亮的html表格排序实现”，我们需要借助JavaScript或者jQuery等库来增强HTML表格的功能，让数据可以按照用户的需求进行升序或降序排列。下面将详细介绍这个过程中的关键知识点。 1. HTML基础 首先，我们...

    JQuery插件实现表格排序

    在描述中提到了一个博客链接，虽然具体内容没有给出，但可以推测博主分享了一篇关于如何使用jQuery创建表格排序功能的文章。在实际应用中，这样的插件可能包括以下关键知识点： 1. **jQuery基础**：了解jQuery的...

    Table表格排序显示jQuery代码

    "Table表格排序显示jQuery代码"是一个实用的工具，它允许用户通过简单的点击表头来实现表格数据的多维度排序，包括分类排序、数字大小排序以及英文排序等。这个功能极大地提升了用户体验，使得大量数据的浏览和分析...

    使用jqueryUI实现表格排序功能

    而“使用jQuery UI实现表格排序功能”是网页交互设计中的常见需求，尤其对于数据展示丰富的网页，如报表、数据分析页面等。jQuery UI 的 tablesorter 插件可以方便地实现这一功能，让表格数据可以根据用户的需求进行...

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