登录
当前位置： 首页 > 编程笔记 >

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

唐茂实
2023-03-14
本文向大家介绍JavaScript实现表格点击排序的方法，包括了JavaScript实现表格点击排序的方法的使用技巧和注意事项，需要的朋友参考一下

本文实例讲述了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实现Table排序的方法

    本文向大家介绍javascript实现Table排序的方法，包括了javascript实现Table排序的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript实现Table排序的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的javascript程序设计有所帮助。

  • 基于jQuery实现表格的排序

    本文向大家介绍基于jQuery实现表格的排序，包括了基于jQuery实现表格的排序的使用技巧和注意事项，需要的朋友参考一下 主要思路： 　　因为JS有SORT的方法，对数组进行排序，那么通过个方法，我们就会想到数组了。 　　1.点标表格标头的时候，取出点击的是那一列。即列的索引值。因为下面要进行排序的就是该列。所以我要知道是点的那一列。 　　2.对表格的数据部分，也就是tbody部分，进行点击的列

  • javascript实现表格排序 编辑 拖拽 缩放

    本文向大家介绍javascript实现表格排序 编辑 拖拽 缩放，包括了javascript实现表格排序 编辑 拖拽 缩放的使用技巧和注意事项，需要的朋友参考一下 简单表格排序  可以双击编辑 自定义编辑后的 规则  可拖动列进行列替换  可推动边框进行列宽度的缩放    已知BUG：  ie6下 中文不自动换行  非ie下字母和数字也不自动换行确实让人恼火  chrome浏览器下点击运行好像问题

  • JS实现点击表头表格自动排序（含数字、字符串、日期）

    本文向大家介绍JS实现点击表头表格自动排序（含数字、字符串、日期），包括了JS实现点击表头表格自动排序（含数字、字符串、日期）的使用技巧和注意事项，需要的朋友参考一下 效果图如下： Demo演示地址：点击这里 主要的JS代码如下： 完整实例代码 总结 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

  • js表头排序实现方法

    本文向大家介绍js表头排序实现方法，包括了js表头排序实现方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js表头排序实现方法。分享给大家供大家参考。 具体实现方法如下： 希望本文所述对大家的javascript程序设计有所帮助。

  • javascript实现对表格元素进行排序操作

    本文向大家介绍javascript实现对表格元素进行排序操作，包括了javascript实现对表格元素进行排序操作的使用技巧和注意事项，需要的朋友参考一下 我们在上网中都能看到很多能够排序的，如大小、时间、价格等 现在我们也试一下排序功能： 排序的函数代码：里面含有点击之后排序--还原，和排升序和降序。 设置表格的背景颜色代码，导入的css： css代码： 效果图-----排序之前： 升序： 降序

相关阅读

js表头排序实现方法javascript实现对表格元素进行排序操作javascript实现点击商品列表checkbox实时统计金额的方法JS实现HTML表格排序功能javascript操作表格排序实例分析

相关文章

C#排序列表JDBC排序数据实例JavaScript算法-删除排序数组中的重复项EMQ前端实习（排序挂）HTML 标签列表（功能排序）

相关问答

未排序的链表实现检查已满javascript - 点击＋号，增加form表单的子级应该怎么做能实现？前端 - 在vue中，如何实现点击表头任意位置就能实现表格全屏效果？vue.js - v-snackbar点击外部关闭功能的实现方法?javascript - 求助大佬！实现Antd的单元格嵌套表格？

相关工具

H 点击器粒子点击加拿大点击废料点击器城市点击器

相关文档

各种算法的 Python 实现方案常用算法实现方法JavaScript 高级的知识点JavaScript 风格指南十大经典排序算法
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.