javascript实现Table排序的方法

2024-02-17 03:03:53

本文实例讲述了javascript实现Table排序的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格排序</title>
<style type="text/css">
body
{
 margin:0;
 padding:0;
 font-size:14px;
}
table,td,th
{
 border:1px solid red;
}
th
{
 width:100px;
 background:pink;
}
table
{
 margin:0 auto;
}
a
{
 text-decoration:none;
}
</style>
<script type="text/javascript">
function sortAge() {
 //获得表格对象
 var tblObj = document.getElementById("tblData");
 //把行节点集合存放到临时数组中，
 //注意这里存放的是表格行节点对象集合的引用
 //后续把排序后的数据添加回表格时，不需要删除行节点。
 var rowNodes = tblObj.rows;
 var arrTemp = new Array();
 for (var i = 1; i < rowNodes.length; i++) {
  arrTemp[i - 1] = rowNodes[i];
 }
 var sortFlag = tblObj.rows[0].cells[1].innerText;
 sortFlag = sortFlag.charAt(sortFlag.length - 1);
 //取最后一个字符（↑表示升序，↓表示降序）
 if (sortFlag == "↑") {
  tblObj.rows[0].cells[1].innerHTML = "<a href='javascript:void(0)' onclick='sortAge()'>年龄↓</a>";
  for (var i = 0; i < arrTemp.length; i++) {
   for (var j = i + 1; j < arrTemp.length; j++) {
    if (parseInt(arrTemp[j].cells[1].innerText) < parseInt(arrTemp[i].cells[1].innerText)) {
     var temp = arrTemp[i];
     arrTemp[i] = arrTemp[j];
     arrTemp[j] = temp;
    }
   }
  }
 }
 else {
  tblObj.rows[0].cells[1].innerHTML = "<a href='javascript:void(0)' onclick='sortAge()'>年龄↑</a>";
  for (var i = 0; i < arrTemp.length; i++) {
   for (var j = i + 1; j < arrTemp.length; j++) {
    if (parseInt(arrTemp[j].cells[1].innerText) > parseInt(arrTemp[i].cells[1].innerText)) {
     var temp = arrTemp[i];
     arrTemp[i] = arrTemp[j];
     arrTemp[j] = temp;
    }
   }
  }
 }
 //把排序后的数据添加回表格，
 //注意由于存放的是引用，所以不需要删除原来的行
 var TBodyObj = tblObj.childNodes[0];
 for (var i = 0; i < arrTemp.length; i++) {
  TBodyObj.appendChild(arrTemp[i]);
 }
}
</script>
</head>
<body>
<table id="tblData" cellspacing="0px" cellpadding="5px">
  <tr>
    <th>姓名</th>
    <th><a href="javascript:void(0)" onclick="sortAge()">年龄↑</a></th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>南昌</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>21</td>
    <td>郑州</td>
  </tr>
  <tr>
    <td>李莫</td>
    <td>35</td>
    <td>天津</td>
  </tr>
  <tr>
    <td>肖丽</td>
    <td>19</td>
    <td>深圳</td>
  </tr>
  <tr>
    <td>罗成</td>
    <td>23</td>
    <td>上海</td>
  </tr>
</table>
</body>
</html>

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

Javascript 数组排序详解

如果你接触javascript有一段时间了,你肯定知道数组排序函数sort,sort是array原型中的一个方法,即array.prototype.sort(),sort(compareFunction),其中compareFunction是一个比较函数,下面我们看看来自Mozilla MDN 的一段描述: If compareFunction is not supplied, elements are sorted by converting them to strings and compa
javascript实现表格排序编辑拖拽缩放

简单表格排序可以双击编辑自定义编辑后的规则可拖动列进行列替换可推动边框进行列宽度的缩放复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht
浅谈javascript实现八大排序

开学一个月,已经多次梦见笔试出现数据结构算法题,我对数据结构的恐惧已经多于任何"妖魔鬼怪"了.呵呵,看来真的很有必要复习一下常用的数据结构,免得"噩梦"成真. 数据机构等编程基础的重要性不用多说,直接进入正题. 排序算法,分为内部排序和外部排序.内部排序要使用内存,这里只探讨内部排序. 1,插入排序:直接插入排序和希尔排序 2,选择排序:简单选择排序和堆排序 3,交换排序:冒泡排序和快速排序 4,归并排序 5,基数排序直接插入排序基本思想:在要排序的一组数,假设
javascript对中文按照拼音排序代码

今天在代码中用到了对中文按照拼音排序,咨询了群里面的大神后得到了下面的代码: var arr = ["张三","李四","王五","阿三"]; document.write(arr+"<br/>"); arr.sort(function(a,b){ return a.localeCompare(b); }); document.write(arr);
JavaScript实现表格点击排序的方法

本文实例讲述了JavaScript实现表格点击排序的方法.分享给大家供大家参考.具体分析如下: 这里实现基于JS的表格点击排序效果,可以根据表格内的数据大小自动按顺序排列,股票网站常会见到这种功能. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>表格排序</title> <
JavaScript自定义数组排序方法

本文实例讲述了JavaScript自定义数组排序方法.分享给大家供大家参考.具体分析如下: Array中有自带的排序功能,这个使用起来比较方便,我们有一点必须清楚,就是排序的依据,如果sort不传入参数的话,那就是按照字符编码(Unicode编码)的顺序排序. var a=["3","2","1"]; console.log(a[0].charCodeAt(0)); // 51 console.log(a[1].charCodeAt(0)); /
JavaScript对表格或元素按文本，数字或日期排序的方法

本文实例讲述了JavaScript对表格或元素按文本,数字或日期排序的方法.分享给大家供大家参考.具体实现方法如下: // Sorting table columns correctly by text, number or date. There are other // versions, plugins, etc., for this but they either are restricted to specific // date formats, or require EVERY r
javascript实现Table排序的方法

本文实例讲述了javascript实现Table排序的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
javascript清空table表格的方法

本文实例讲述了javascript清空table表格的方法.分享给大家供大家参考.具体如下: 1. 通常方法循环table的rows,然后一个一个删除. 这个方法是通常的方法,可行,但是效率不好. 2. 另一个方法 var artTable = document.getElementById("artical_table"); console.debug(artTable.getElementsByTagName("thead")[0]); var artBody
JavaScript实现拼音排序的方法

一般情况下,大家会使用下面的方法来进行汉字的拼音排序复制代码代码如下: var list = [ '王', '张','李']; list.sort(function (a, b) { return a.localeCompare(b); }); localeCompare() :用本地特定的顺序来比较两个字符串. 通过localeCompare这个方法来进行拼音排序的不可靠之处在于: 1. 很依赖中文操作系统 2. 很依赖浏览器的内核也就是说,如果你的网站访问者是通过非中文系统,或者非IE
javascript操作表格排序实例分析

本文实例讲述了javascript操作表格排序的方法.分享给大家供大家参考.具体如下: 完整例子如下: <html> <head> <title>Table Sort Example</title> <script type="text/javascript"> //转换器,将列的字段类型转换为可以排序的类型:String,int,float function convert(sValue, sDataType) { swit
javascript数组随机排序实例分析

本文实例讲述了javascript数组随机排序实现方法.分享给大家供大家参考.具体如下: 我们就测试0-9的随机排序,先生成数据 var arr=[9,3,1,2,5,8,4,7,6,0]; arr.sort(); document.write("正常排序后的数组元素:"+arr.join(",")+"<BR />"); 正常排序后的数组元素:0,1,2,3,4,5,6,7,8,9 定义一个随机函数,随机返回正数或者负数,sort函数
JavaScript实现下拉列表框数据增加、删除、上下排序的方法

本文实例讲述了JavaScript实现下拉列表框数据增加.删除.上下排序的方法.分享给大家供大家参考.具体如下: 这里实现在一个支持多选的下拉列表框内进行数据项的添加.删除.向上.向下移动操作,我们在一些人才网站或是编程技术站经常会看到这种功能,比较实用. 运行效果截图如下: 具体代码如下: <title>下拉列表数据上下排序</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function
javascript 实现简单的table排序及table操作练习

在这个列子中,练习了table的操作,主要有:tBodies.rows.cells,还有有关数组的排序方法:sort 先上代码: 复制代码代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>table排序</title> </head> <body> <table id="tableTest&q
JavaScript实现将xml转换成html table表格的方法

本文实例讲述了JavaScript实现将xml转换成html table表格的方法.分享给大家供大家参考.具体如下: function ConvertToTable(targetNode) { // if the targetNode is xmlNode this line must be removed // i couldnt find a way to parse xml string to xml node // so i parse xml string to xml documen

javascript实现Table排序的方法

相关推荐

随机推荐