表格排序脚本

最新推荐文章于 2024-07-26 17:30:14 发布
最新推荐文章于 2024-07-26 17:30:14 发布
阅读量684 收藏
点赞数
分类专栏： 在网上找的文章 文章标签： function float table javascript 算法 优化

工作中收集

原贴出处：

http://topic.csdn.net/t/20020612/00/796253.html

文件名：sortTable.js  
   
  /**  
  **     对任意一个表格进行排序之一：  
   
  **     作者：emu(ston)  
   
  **     使用：  
  在网页中定义表格的时候加入如下标记：  
  <TABLE   sortable=true>  
  该网页即可排序。  
   
  可以指定一行为标题栏，按如下格式：  
  <TR   sortLine=true   >  
  如不指定则为表格第一行。  
   
  默认按照字母顺序排序，如某列需按数字排序，对应的标题栏要这样定义  
  <TD   sortType="float">ddd</TD>  
   
  **     注意：    
  1   如果表格中存在tHead部分，sortLine行应该在thead中  
  2   如不指定sortLine，默认表格的第一行为sortLine  
  3   排序算法未经优化，在表格比较大的时候速度会比较慢（优化的算法呢？下回吧。）  
  4   这个版本的排序完全使用节点克隆，主要考虑到有的时候表格里面可能会有其他的元素，但是在某些版本的浏览器上这样的操作有可能不够安全。只使用简单表格的话可以试试：对任意一个表格进行排序之二  
   
  */  
  var   tmptables   =   document.all.tags("table");  
  for   (var   i=0;i<tmptables.length;i++)  
  if   (tmptables[i].sortable)  
  attachTable(tmptables[i])  
  var   sortLine,sortCol;  
   
  function   tableToArray(tmptable)  
  {  
  var   result   =   new   Array();  
  if   (tmptable.tHead   ==   null)  
  {  
  for   (var   i=tmptable.firstChild.children.length-1;i>sortLine;i--)  
  {  
  var   tmptr   =   tmptable.firstChild.children[i];//如果不存在thead的话就把tbody中在sortLine行之下的行排序  
  result[result.length]   =   tmptr.cloneNode(true);  
  }  
  }  
  else  
  {  
  for   (var   i=tmptable.children[1].children.length-1;i>-1;i--)  
  {  
  var   tmptr   =tmptable.children[1].children[i];   //如果存在thead的话则默认把tbody中的全部行排序  
  result[result.length]   =   tmptr.cloneNode(true);  
  }  
  }  
  return   result;  
  }  
   
  function   sortArrayFloat(arg1,arg2)   //根据指定的列按浮点数排序  
  {    
  if   (parseFloat(arg1.children[sortCol].innerText)   >   parseFloat(arg2.children[sortCol].innerText))   return   1  
  else   return   -1  
  }  
  function   sortArrayString(arg1,arg2)   //根据指定的列按串排序  
  {    
  if   (arg1.children[sortCol].innerText>arg2.children[sortCol].innerText)   return   1  
  else   return   -1  
  }  
   
  function   arrayToTable(ar,tmptable)  
  {  
  if   (tmptable.tHead   ==   null)  
  tmptbody   =   tmptable.firstChild;  
  else  
  tmptbody   =   tmptable.children[1];  
   
  for   (var   i=0;i<ar.length;i++)  
  {  
  tmptbody.deleteRow(ar[i].rowIndex);  
  }  
  var   tmptbody;  
  for   (var   i=0;i<ar.length;i++)  
  {  
  tmptbody.insertBefore(ar[i]);  
  }  
  }  
   
  function   sortTable()  
  {  
   
  var   elm   =   event.srcElement;  
  var   tmptr   =   elm.parentNode;  
  tmptable   =   tmptr.parentNode.parentNode;  
   
  for   (var   i=0;i<tmptr.children.length;   i++)  
  {  
  if   (tmptr.children[i]   ==   elm   )  
  break  
  }  
  sortCol   =   i;//获得被点击的列  
  sortLine   =   tmptable.sortLine;//获得被点击的行  
  var   ar   =   tableToArray(tmptable);//把行转换为数组  
  if   (elm.sortType   ==   "float")  
  ar.sort(sortArrayFloat);//排序  
  else  
  ar.sort(sortArrayString);//排序  
   
  if   (elm.reverse   ==   true)  
  {  
  elm.reverse   =   false;  
  ar.reverse();  
  }  
  else  
  {  
  elm.reverse   =   true;  
  }  
  arrayToTable(ar,tmptable);  
  }  
   
  function   attachTable(tmptable)  
  //   为一个表格的一行添加事件  
  {  
  var   line   =   0;  
  for   (var   i=0;i<tmptable.firstChild.children.length   ;   i++)  
  if   (tmptable.firstChild.children[i].sortLine)  
  line   =   i   ;  
  var   tds   =   tmptable.firstChild.children[line].children;  
  for   (var   i=0;i<tds.length;i++)  
  {  
  tds[i].attachEvent("onclick",sortTable);  
  tds[i].style.cursor="hand";  
  tds[i].style.fontWeight="bold"  
  }  
  tmptable.sortLine=line;  
  }  
   
   
  使用的示范：  
   
  <html>  
  <head>  
  <title></title>  
  </head>  
  <body>  
  <TABLE   sortable=true>  
  <thead>  
  <TR>  
  <TD   colspan=4>考试成绩</TD>  
  </TR>  
  <TR   sortLine=true   >  
  <TD>姓名</TD>  
  <TD   sortType="float">语文</TD>  
  <TD   sortType="float">数学</TD>  
  <TD   sortType="float">英语</TD>  
  </TR>  
  </thead>  
  <tbody>  
  <TR>  
  <TD>aaa</TD>  
  <TD>65</TD>  
  <TD>60</TD>  
  <TD>87</TD>  
  </TR>  
  <TR>  
  <TD>bbb</TD>  
  <TD>75</TD>  
  <TD>60</TD>  
  <TD>85</TD>  
  </TR>  
  <TR>  
  <TD>ccc</TD>  
  <TD>55</TD>  
  <TD>74</TD>  
  <TD>73</TD>  
  </TR>  
  <TR>  
  <TD>ddd</TD>  
  <TD>95</TD>  
  <TD>90</TD>  
  <TD>100</TD>  
  </TR>  
  </tbody>  
  <tfoot>  
  <tr>  
  <td   colspan=4   align=center   style="font-size:15;color:red">  
  by   emu(ston)   2002  
  </td>  
  </tr>  
  </tfoot>  
  </TABLE>  
  <BR>  
  <SCRIPT   LANGUAGE="JavaScript"   src="sortTable.js"></SCRIPT>  
  </body>  
  </html>   
 

 

文件名：sortTable2.js  
   
  /**  
  **     对任意一个表格进行排序之二：  
   
  **     作者：emu(ston)  
   
  **     使用：  
  在网页中定义表格的时候加入如下标记：  
  <TABLE   sortable=true>  
  该网页即可排序。  
   
  可以指定一行为标题栏，按如下格式：  
  <TR   sortLine=true   >  
  如不指定则为表格第一行。  
   
  默认按照字母顺序排序，如某列需按数字排序，对应的标题栏要这样定义  
  <TD   sortType="float">ddd</TD>  
   
  **     注意：    
  1   如果表格中存在tHead部分，sortLine行应该在thead中  
  2   如不指定sortLine，默认表格的第一行为sortLine  
  3   排序算法未经优化，在表格比较大的时候速度会比较慢（优化的算法呢？下回吧。）  
  4   这个版本的排序完全使用   innerHTML   ,也许会安全一些，速度也许也会慢一些。  
   
  */  
  var   tmptables   =   document.all.tags("table");  
  for   (var   i=0;i<tmptables.length;i++)  
  if   (tmptables[i].sortable)  
  attachTable(tmptables[i])  
  var   sortLine,sortCol;  
   
  function   tableToArray(tmptable)  
  {  
  var   result   =   new   Array();  
  if   (tmptable.tHead   ==   null)  
  {  
  for   (var   i=tmptable.firstChild.children.length-1;i>sortLine;i--)  
  {  
  var   tmptr   =   tmptable.firstChild.children[i];//如果不存在thead的话就把tbody中在sortLine行之下的行排序  
  result[result.length]   =   tmptr.cloneNode(true);  
  }  
  }  
  else  
  {  
  for   (var   i=tmptable.children[1].children.length-1;i>-1;i--)  
  {  
  var   tmptr   =tmptable.children[1].children[i];   //如果存在thead的话则默认把tbody中的全部行排序  
  result[result.length]   =   tmptr.cloneNode(true);  
  }  
  }  
  return   result;  
  }  
   
  function   sortArrayFloat(arg1,arg2)   //根据指定的列按浮点数排序  
  {    
  if   (parseFloat(arg1.children[sortCol].innerText)   >   parseFloat(arg2.children[sortCol].innerText))   return   1  
  else   return   -1  
  }  
  function   sortArrayString(arg1,arg2)   //根据指定的列按串排序  
  {    
  if   (arg1.children[sortCol].innerText>arg2.children[sortCol].innerText)   return   1  
  else   return   -1  
  }  
   
  function   arrayToTable(ar,tmptable)  
  {  
  if   (tmptable.tHead   ==   null)  
  {  
  tmptbody   =   tmptable.firstChild;//如果不存在thead的话就把tbody中在sortLine行之下的行排序  
  for   (var   i=tmptbody.children.length-1;i>sortLine;i--)  
  {  
  var   tmptr   =tmptbody.children[i];  
  for   (var   j=0;j<tmptr.children.length;j++   )  
  {  
  tmptr.children[j].innerHTML   =   ar[tmptbody.children.length-i-1].children[j].innerHTML  
  }  
  }  
  }  
  else  
  {  
  tmptbody   =   tmptable.children[1];  
  for   (var   i=tmptbody.children.length-1;i>-1;i--)  
  {  
  var   tmptr   =tmptbody.children[i];  
  for   (var   j=0;j<tmptr.children.length;j++   )  
  {  
  tmptr.children[j].innerHTML   =   ar[tmptbody.children.length-i-1].children[j].innerHTML  
  }  
  }  
  }  
  }  
   
  function   sortTable()  
  {  
   
  var   elm   =   event.srcElement;  
  var   tmptr   =   elm.parentNode;  
  tmptable   =   tmptr.parentNode.parentNode;  
   
  for   (var   i=0;i<tmptr.children.length;   i++)  
  {  
  if   (tmptr.children[i]   ==   elm   )  
  break  
  }  
  sortCol   =   i;//获得被点击的列  
  sortLine   =   tmptable.sortLine;//获得被点击的行  
  var   ar   =   tableToArray(tmptable);//把行转换为数组  
  if   (elm.sortType   ==   "float")  
  ar.sort(sortArrayFloat);//排序  
  else  
  ar.sort(sortArrayString);//排序  
   
  if   (elm.reverse   ==   true)  
  {  
  elm.reverse   =   false;  
  ar.reverse();  
  }  
  else  
  {  
  elm.reverse   =   true;  
  }  
  arrayToTable(ar,tmptable);  
  }  
   
  function   attachTable(tmptable)  
  //   为一个表格的一行添加事件  
  {  
  var   line   =   0;  
  for   (var   i=0;i<tmptable.firstChild.children.length   ;   i++)  
  if   (tmptable.firstChild.children[i].sortLine)  
  line   =   i   ;  
  var   tds   =   tmptable.firstChild.children[line].children;  
  for   (var   i=0;i<tds.length;i++)  
  {  
  tds[i].attachEvent("onclick",sortTable);  
  tds[i].style.cursor="hand";  
  tds[i].style.fontWeight="bold"  
  }  
  tmptable.sortLine=line;  
  }  
   
   
  使用示范：  
   
  <html>  
  <head>  
  <title></title>  
  </head>  
  <body>  
  <TABLE   sortable=true>  
  <thead>  
  <TR>  
  <TD   colspan=4>考试成绩</TD>  
  </TR>  
  <TR   sortLine=true   >  
  <TD>姓名</TD>  
  <TD   sortType="float">语文</TD>  
  <TD   sortType="float">数学</TD>  
  <TD   sortType="float">英语</TD>  
  </TR>  
  </thead>  
  <tbody>  
  <TR>  
  <TD>aaa</TD>  
  <TD>65</TD>  
  <TD>60</TD>  
  <TD>87</TD>  
  </TR>  
  <TR>  
  <TD>bbb</TD>  
  <TD>75</TD>  
  <TD>60</TD>  
  <TD>85</TD>  
  </TR>  
  <TR>  
  <TD>ccc</TD>  
  <TD>55</TD>  
  <TD>74</TD>  
  <TD>73</TD>  
  </TR>  
  <TR>  
  <TD>ddd</TD>  
  <TD>95</TD>  
  <TD>90</TD>  
  <TD>100</TD>  
  </TR>  
  </tbody>  
  <tfoot>  
  <tr>  
  <td   colspan=4   align=center   style="font-size:15;color:red">  
  by   emu(ston)   2002  
  </td>  
  </tr>  
  </tfoot>  
  </TABLE>  
  <BR>  
  <SCRIPT   LANGUAGE="JavaScript"   src="sortTable2.js"></SCRIPT>  
  </body>  
  </html>  

diborve
关注
专栏目录
shell脚本实现希尔（shell)排序
Hyacinth_Dy
07-31 784
采用shell脚本实现希尔排序
表格脚本（打印行与列）
Ason_haiyu的博客
05-14 520
String url = "file:///D:/tomcat/apache-tomcat-7.0.26/webapps/08web/WebContent/table.html"; driver.get(url); String title = driver.getTitle(); String currentUrl = driver.getCurrentUrl(); System...
Python | 分享8个Excel自动化脚本，一定有你用得上的！
qq_56262770的博客
07-18 2637
本文将介绍8个常用的Python脚本，帮助你轻松应对Excel的日常操作。那话不多说，开始吧！
表单脚本
李刚的学习专栏
04-03 2667
下述内存主要讲述了《JavaScript高级程序设计（第3版）》第14章关于“表单脚本”。 刚开始人们使用JavaScript，最主要的目的之一就是表单的验证，分担服务器处理表单的责任。虽然现流行的大部分提交方式是通过ajax，但了解表单，对于ajax方式也是有重大帮助的！所以，大家不要看轻表单。一、表单的基础知识在HTML中，表单由元素来表示，而在JavaScript中，表单对应的则是HTMLFo
【表格脚本演示】
fusheng2413的博客
12-07 281
ul 无序列表<li> ol 有序列表<li> dl 定义列表<dt> 表格 <tr>行 <td>列 colspan合并列 rowspan合并行
一个排序的小脚本
weixin_33722405的博客
01-30 123
CU论坛的一个问题...刚好正在学习脚本,折腾了一下,OK,记录一下. 问题: 两文件第一列相同，需要得到每一行除第一列外相同的数的个数，如 ~$cat kkk123298336785435158 cat ddd132289136895432592 希望得到的结果 $catsort....
JavaScript原生表格排序脚本实现及兼容性处理
"提供了一个基于JavaScript的小组件，用于实现原生HTML table的排序功能，兼容Internet Explorer、Firefox、Opera和Chrome等主流浏览器。...如果你正在寻找一个简单的表格排序解决方案，这是一个值得考虑的选择。
ID 汉字表格排序脚本
01-29
用于Adobe Indesign的脚本。开发语言为Javascript。功能为可用于表格的拼音比划排序。可按照某行或某列进行整个Table的排序。
33种Javascript 表格排序控件收集
10-29
18. BrainJar Table Sort（18）：BrainJar的表格排序脚本支持多列排序和自定义比较函数，易于集成到现有项目中。 19. Sorting Columns in a Table（19）：这个简单的JavaScript脚本实现了表格列的排序功能，适用于...
表格排序
01-11
`tablesort.js` 是一个用于表格排序的JavaScript库，而 `jquery-1.9.0.min.js` 是jQuery的轻量级版本，它是一个广泛使用的JavaScript库，提供了更简单、更高效的DOM操作、事件处理和动画功能。 首先，我们要理解...
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
10-28
这个小组件通过简单的HTML标记和JavaScript脚本实现，使得用户可以通过点击表头对表格数据进行升序或降序排序。 首先，我们来看一下HTML部分。在`sort.html` 文件中，创建了一个包含两个表格的页面。每个表格都有`...
Excel简单排序的例子.rar
09-26
Excel简单排序的例子.rar,按“科目名称”笔划顺序升序排序的简单示例。
常用 EXCEL宏脚本VBA（非常全面）
08-12
常用 EXCEL宏脚本VBA（非常全面） 对于写脚步处理数据有非常高的参考价值
【Node.js】写一个数据自动整理成表格的脚本
qq_45472813的博客
01-14 1475
企业项目进行数据埋点后，埋点事件名需要整理成Excel表格便于统计，目标是将下图左侧数据转化成下图右侧的Excel表格：考虑到左侧埋点数据是随项目迭代增加的，埋点数据每增加一次我就要把数据一条一条的Ctrl+C/V复制粘贴至Excel表格内。懒，不想这样玩，于是我写了一个自动帮我整理成表格的脚本。
excel脚本
a85489601531的博客
06-18 1505
Alt键的高手用法 选中所有数据之后，以前我们输入sum函数，选择相加的部分，然后下拉。现在教你一个办法，按住alt键加=号 ，一秒求和 选中所有数据之后，过去我们需要插入，生成表格，现在只需要，按住alt加f1键，一秒生成图表。 选中图片，一秒对齐网格。 高手拆分数据 姓名工号 姓名 工号 普通人 只会简单且机械的复制 现在教你一个快速拆分文字和中文的办法 复制姓名和工号 到首行，然后在下面用ctrl+E，这样就可以快速的拆分数据了， 中文和英文都是有效的哦 统计迟到时长 姓名 打卡时间 迟
excel脚本(完成)
最新发布
m0_74963183的博客
07-26 442
【代码】excel脚本。
一个显示排序过程的PYTHON脚本
weixin_36841920的博客
03-08 736
之前向大家介绍过《一个排序算法比较的网站》，那个网站用动画演示了各种排序算法，并分析了各种排序算法。这里，要向大家推荐一个Python脚本，其可以把排序的过程给显示出来。下图是“冒泡排序”的一个示例，其中：折线表示了各个元素的位置变化。折线的深浅表示了元素的大小。越深则越大。同样，还有其它一些排序算法的图片：堆排序（Heap Sort）选择排序（Selection）插播福利1.近期整理了20G资源...
jQuery UI 中的sortable("toArray")
yijiulove的专题
02-21 4619
sortable("toArray") jQuery拖拽保存结果
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值