首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript实现表格点击排序的方法

Posted in Javascript onMay 11, 2015

本文实例讲述了JavaScript实现表格点击排序的方法。分享给大家供大家参考。具体分析如下：

这里实现基于JS的表格点击排序效果，可以根据表格内的数据大小自动按顺序排列，股票网站常会见到这种功能。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表格排序</title>
</head>
<STYLE type=text/css>TABLE {
 BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #000000 2px solid;
 BORDER-LEFT: #000000 2px solid; BORDER-BOTTOM: #000000 2px solid;
 border-spacing: 0px; cell-spacing: 0px
}
TD {
 PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt;
 PADDING-BOTTOM: 2px; PADDING-TOP: 2px; 
 FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap
}
TH {
 PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt;
 PADDING-BOTTOM: 2px; PADDING-TOP: 2px;
 FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap
}
TD.numeric {
 TEXT-ALIGN: right
}
TH {
 BACKGROUND-COLOR: #c0c0c0
}
TH.mainHeader {
 COLOR: #ffffff; BACKGROUND-COLOR: #808080; TEXT-ALIGN: left
}
TH A {
 COLOR: #000080; TEXT-DECORATION: none
}
TH A:visited {
 COLOR: #000080
}
TH A:active {
 COLOR: #800000; TEXT-DECORATION: underline
}
TH A:hover {
 COLOR: #800000; TEXT-DECORATION: underline
}
TR.alternateRow {
 BACKGROUND-COLOR: #e0e0e0
}
TD.sortedColumn {
 BACKGROUND-COLOR: #f0f0f0
}
TH.sortedColumn {
 BACKGROUND-COLOR: #b0b0b0
}
TR.alternateRow TD.sortedColumn {
 BACKGROUND-COLOR: #d0d0d0
}
</STYLE>
<SCRIPT type=text/javascript>
function sortTable(id, col, rev) {
 var tblEl = document.getElementById(id);
 if (tblEl.reverseSort == null) {
  tblEl.reverseSort = new Array();
  tblEl.lastColumn = 1;
 }
 if (tblEl.reverseSort[col] == null)
  tblEl.reverseSort[col] = rev;
 if (col == tblEl.lastColumn)
  tblEl.reverseSort[col] = !tblEl.reverseSort[col];
 tblEl.lastColumn = col;
 var oldDsply = tblEl.style.display;
 tblEl.style.display = "none";
 var tmpEl;
 var i, j;
 var minVal, minIdx;
 var testVal;
 var cmp;
 for (i = 0; i < tblEl.rows.length - 1; i++) {
  minIdx = i;
  minVal = getTextValue(tblEl.rows[i].cells[col]);
  for (j = i + 1; j < tblEl.rows.length; j++) {
   testVal = getTextValue(tblEl.rows[j].cells[col]);
   cmp = compareValues(minVal, testVal);
   if (tblEl.reverseSort[col])
    cmp = -cmp;
   if (cmp == 0 && col != 1)
    cmp = compareValues(getTextValue(tblEl.rows[minIdx].cells[1]),
              getTextValue(tblEl.rows[j].cells[1]));
   if (cmp > 0) {
    minIdx = j;
    minVal = testVal;
   }
  }
  if (minIdx > i) {
   tmpEl = tblEl.removeChild(tblEl.rows[minIdx]);
   tblEl.insertBefore(tmpEl, tblEl.rows[i]);
  }
 }
 makePretty(tblEl, col);
 setRanks(tblEl, col, rev);
 tblEl.style.display = oldDsply;
 return false;
}
if (document.ELEMENT_NODE == null) {
 document.ELEMENT_NODE = 1;
 document.TEXT_NODE = 3;
}
function getTextValue(el) {
 var i;
 var s;
 s = "";
 for (i = 0; i < el.childNodes.length; i++)
  if (el.childNodes[i].nodeType == document.TEXT_NODE)
   s += el.childNodes[i].nodeValue;
  else if (el.childNodes[i].nodeType == document.ELEMENT_NODE && 
       el.childNodes[i].tagName == "BR")
   s += " ";
  else
   // Use recursion to get text within sub-elements.
   s += getTextValue(el.childNodes[i]);
 return normalizeString(s);
}
function compareValues(v1, v2) {
 var f1, f2;
 f1 = parseFloat(v1);
 f2 = parseFloat(v2);
 if (!isNaN(f1) && !isNaN(f2)) {
  v1 = f1;
  v2 = f2;
 }
 // Compare the two values.
 if (v1 == v2)
  return 0;
 if (v1 > v2)
  return 1
 return -1;
}
var whtSpEnds = new RegExp("^\\s*|\\s*$", "g");
var whtSpMult = new RegExp("\\s\\s+", "g");
function normalizeString(s) {
 s = s.replace(whtSpMult, " "); // Collapse any multiple whites space.
 s = s.replace(whtSpEnds, "");  // Remove leading or trailing white space.
 return s;
}
var rowClsNm = "alternateRow";
var colClsNm = "sortedColumn";
var rowTest = new RegExp(rowClsNm, "gi");
var colTest = new RegExp(colClsNm, "gi");
function makePretty(tblEl, col) {
 var i, j;
 var rowEl, cellEl;
 for (i = 0; i < tblEl.rows.length; i++) {
  rowEl = tblEl.rows[i];
  rowEl.className = rowEl.className.replace(rowTest, "");
  if (i % 2 != 0)
   rowEl.className += " " + rowClsNm;
  rowEl.className = normalizeString(rowEl.className);
  for (j = 2; j < tblEl.rows[i].cells.length; j++) {
   cellEl = rowEl.cells[j];
   cellEl.className = cellEl.className.replace(colTest, "");
   if (j == col)
    cellEl.className += " " + colClsNm;
   cellEl.className = normalizeString(cellEl.className);
  }
 }
 var el = tblEl.parentNode.tHead;
 rowEl = el.rows[el.rows.length - 1];
 for (i = 2; i < rowEl.cells.length; i++) {
  cellEl = rowEl.cells[i];
  cellEl.className = cellEl.className.replace(colTest, "");
  if (i == col)
   cellEl.className += " " + colClsNm;
   cellEl.className = normalizeString(cellEl.className);
 }
}
function setRanks(tblEl, col, rev) {
 var i  = 0;
 var incr = 1;
 if (tblEl.reverseSort[col])
  rev = !rev;
 if (rev) {
  incr = -1;
  i = tblEl.rows.length - 1;
 }
 var count  = 1;
 var rank  = count;
 var curVal;
 var lastVal = null;
 while (col > 1 && i >= 0 && i < tblEl.rows.length) {
  curVal = getTextValue(tblEl.rows[i].cells[col]);
  if (lastVal != null && compareValues(curVal, lastVal) != 0)
    rank = count;
  tblEl.rows[i].rank = rank;
  lastVal = curVal;
  count++;
  i += incr;
 }
 var rowEl, cellEl;
 var lastRank = 0;
 for (i = 0; i < tblEl.rows.length; i++) {
  rowEl = tblEl.rows[i];
  cellEl = rowEl.cells[0];
  while (cellEl.lastChild != null)
   cellEl.removeChild(cellEl.lastChild);
  if (col > 1 && rowEl.rank != lastRank) {
   cellEl.appendChild(document.createTextNode(rowEl.rank));
   lastRank = rowEl.rank;
  }
 }
}
</SCRIPT>
</HEAD>
<BODY>
<!-- Offensive statistics table. -->
<TABLE cellSpacing=0 cellPadding=0 border=0>
 <THEAD>
 <TR>
  <TH class=mainHeader colSpan=11>NFL 2001 Offensive Stats</TH></TR>
 <TR>
  <TH style="TEXT-ALIGN: left">Rank</TH>
  <TH style="TEXT-ALIGN: left"><A title="Team Name" 
   onclick="this.blur(); return sortTable('offTblBdy', 1, false);" 
   href="#">Team</A></TH>
  <TH><SPAN title="Games Played">Gms</SPAN></TH>
  <TH><A title="Total Yards" 
   onclick="this.blur(); return sortTable('offTblBdy', 3, true);" 
   href="#">Yds</A></TH>
  <TH><A title="Yards Per Game" 
   onclick="this.blur(); return sortTable('offTblBdy', 4, true);" 
   href="#">Yds/G</A></TH>
  <TH><A title="Total Rushing Yards" 
   onclick="this.blur(); return sortTable('offTblBdy', 5, true);" 
   href="#">RuYds</A></TH>
  <TH><A title="Rushing Yards Per Game" 
   onclick="this.blur(); return sortTable('offTblBdy', 6, true);" 
   href="#">RuYds/G</A></TH>
  <TH><A title="Total Passing Yards" 
   onclick="this.blur(); return sortTable('offTblBdy', 7, true);" 
   href="#">PaYds</A></TH>
  <TH><A title="Passing Yards Per Game" 
   onclick="this.blur(); return sortTable('offTblBdy', 8, true);" 
   href="#">PaYds/G</A></TH>
  <TH><A title="Total Points Scored" 
   onclick="this.blur(); return sortTable('offTblBdy', 9, true);" 
   href="#">Pts</A></TH>
  <TH><A title="Points Per Game" 
   onclick="this.blur(); return sortTable('offTblBdy', 10, true);" 
   href="#">Pts/G</A></TH></TR></THEAD>
 <TBODY id=offTblBdy>
 <TR>
  <TD class=numeric></TD>
  <TD>Arizona</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>4898</TD>
  <TD class=numeric>306.1</TD>
  <TD class=numeric>1449</TD>
  <TD class=numeric>90.6</TD>
  <TD class=numeric>3449</TD>
  <TD class=numeric>215.6</TD>
  <TD class=numeric>295</TD>
  <TD class=numeric>18.4</TD></TR>
 <TR class=alternateRow>
  <TD class=numeric></TD>
  <TD>Atlanta</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>5070</TD>
  <TD class=numeric>316.9</TD>
  <TD class=numeric>1773</TD>
  <TD class=numeric>110.8</TD>
  <TD class=numeric>3297</TD>

  <TD class=numeric>206.1</TD>
  <TD class=numeric>291</TD>
  <TD class=numeric>18.2</TD></TR>
<TR>
<TD class=numeric></TD>
  <TD>Detroit</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>4994</TD>
  <TD class=numeric>312.1</TD>
  <TD class=numeric>1398</TD>
  <TD class=numeric>87.4</TD>
  <TD class=numeric>3596</TD>
  <TD class=numeric>224.8</TD>
  <TD class=numeric>270</TD>
  <TD class=numeric>16.9</TD></TR>
 <TR class=alternateRow>
  <TD class=numeric></TD>
  <TD>Jacksonville</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>4840</TD>
  <TD class=numeric>302.5</TD>
  <TD class=numeric>1600</TD>
  <TD class=numeric>100.0</TD>
  <TD class=numeric>3240</TD>
  <TD class=numeric>202.5</TD>
  <TD class=numeric>294</TD>
  <TD class=numeric>18.4</TD></TR>
 <TR>
  <TD class=numeric></TD>
  <TD>Kansas City</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>5673</TD>
  <TD class=numeric>354.6</TD>
  <TD class=numeric>2008</TD>
  <TD class=numeric>125.5</TD>
  <TD class=numeric>3665</TD>
  <TD class=numeric>229.1</TD>
  <TD class=numeric>320</TD>
  <TD class=numeric>20.0</TD></TR>
 <TR class=alternateRow>
  <TD class=numeric></TD>
  <TD>Miami</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>4821</TD>
  <TD class=numeric>301.3</TD>
  <TD class=numeric>1664</TD>
  <TD class=numeric>104.0</TD>
  <TD class=numeric>3157</TD>
  <TD class=numeric>197.3</TD>
  <TD class=numeric>344</TD>
  <TD class=numeric>21.5</TD></TR>
 <TR>
  <TD class=numeric></TD>
  <TD>Minnesota</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>5006</TD>
  <TD class=numeric>333.7</TD>
  <TD class=numeric>1523</TD>
  <TD class=numeric>101.5</TD>
  <TD class=numeric>3483</TD>
  <TD class=numeric>232.2</TD>
  <TD class=numeric>287</TD>
  <TD class=numeric>19.1</TD></TR>
 <TR class=alternateRow>
  <TD class=numeric></TD>
  <TD>New England</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>4882</TD>
  <TD class=numeric>305.1</TD>
  <TD class=numeric>1793</TD>
  <TD class=numeric>112.1</TD>
  <TD class=numeric>3089</TD>
  <TD class=numeric>193.1</TD>
  <TD class=numeric>371</TD>
  <TD class=numeric>23.2</TD></TR>
 <TR>
  <TD class=numeric></TD>
  <TD>New Orleans</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>5226</TD>
  <TD class=numeric>326.6</TD>
  <TD class=numeric>1712</TD>
  <TD class=numeric>107.0</TD>
  <TD class=numeric>3514</TD>
  <TD class=numeric>219.6</TD>
  <TD class=numeric>333</TD>
  <TD class=numeric>20.8</TD></TR>
 <TR class=alternateRow>
  <TD class=numeric></TD>
  <TD>New York Giants</TD>
  <TD class=numeric>16</TD>
  <TD class=numeric>5335</TD>
  <TD class=numeric>333.4</TD>
  <TD class=numeric>1777</TD>
  <TD class=numeric>111.1</TD>
  <TD class=numeric>3558</TD>
  <TD class=numeric>222.4</TD>
  <TD class=numeric>294</TD>
  <TD class=numeric>18.4</TD></TR>
</TBODY></TABLE>
</BODY>
</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

JavaScript实现表格点击排序的方法

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 #Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 #Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 #Javascript
jQuery子窗体取得父窗体元素的方法
May 11 #Javascript
js控制div弹出层实现方法
May 11 #Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 #Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 #Javascript
云服务器(1) 腾讯云(1) Vite(1) 外键约束(1) Foreign Key(1) dict(1) 脚本(1) expdp(1) hook(1) 数据备份(2)
You might like
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
微信公众平台开发-微信服务器IP接口实例（含源码）
2017/03/05 PHP
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
Python中实现三目运算的方法
2015/06/21 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
韩国11街：11STREET
2018/03/27 全球购物
金融专业个人求职信
2013/09/22 职场文书
中学教师实习自我鉴定
2013/09/28 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
绩效考核实施方案
2014/03/18 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
element多个表单校验的实现
2021/05/27 Javascript
Python采集股票数据并制作可视化柱状图
2022/04/04 Python
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android