如题

 <!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" />

     <style type="text/css">

         .tbl-list, .tbl-list td, .tbl-list th {

             border: solid 1px #000;

             border-collapse: collapse;

             padding: 10px;

             margin: 15px;

         }

     </style>

     <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

     <title>table sort</title>

     <script type="text/javascript">

         //排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型

         function sortAble(th, tableId, iRow, iCol, dataType) {

             var ascChar = "▲";

             var descChar = "▼";

             var table = document.getElementById(tableId);

			 var rows = table.tHead.rows;

             //排序标题加背景色

             for (var i = 0; i < rows.length; i++) {

				 for(var j=0;j<rows[i].cells.length;j++){//取得第几行下面的td个数，再次循环遍历该行下面的td元素

					 var th = rows[i].cells[j];

					 var thText= th.innerHTML.replace(ascChar, "").replace(descChar, "");

					 if(i==iRow&&j==iCol){

					 }

					 else{

						  th.innerHTML=thText;

					 }

				}

             }			

             var tbody = table.tBodies[0];

             var colRows = tbody.rows;

             var aTrs = new Array;

             //将得到的行放入数组，备用

             for (var i = 0; i < colRows.length; i++) {

                     aTrs.push(colRows[i]);

             }

             //判断上一次排列的列和现在需要排列的是否同一个。

             if (table.sortCol == iCol) {

                 aTrs.reverse();

             } else {

                 //如果不是同一列，使用数组的sort方法，传进排序函数

                 aTrs.sort(compareEle(iCol, dataType));

             }

             var oFragment = document.createDocumentFragment();

             for (var i = 0; i < aTrs.length; i++) {

                 oFragment.appendChild(aTrs[i]);

             }

             tbody.appendChild(oFragment);

             //记录最后一次排序的列索引

             table.sortCol = iCol;

             //给排序标题加“升序、降序” 小图标显示

             var th = rows[iRow].cells[iCol];

             if (th.innerHTML.indexOf(ascChar) == -1 && th.innerHTML.indexOf(descChar) == -1) {

                 th.innerHTML += ascChar;

				 //alert(th.innerHTML);

             }

             else if (th.innerHTML.indexOf(ascChar) != -1) {

                 th.innerHTML=th.innerHTML.replace(ascChar, descChar);

				 //alert(th.innerHTML.replace(ascChar,descChar));

             }

             else if (th.innerHTML.indexOf(descChar) != -1) {

                  th.innerHTML=th.innerHTML.replace(descChar, ascChar);

             }

         }

         //将列的类型转化成相应的可以排列的数据类型

        function convert(sValue, dataType) {

             switch (dataType) {

                 case "int":

                     return parseInt(sValue, 10);

                 case "float":

                     return parseFloat(sValue);

                 case "date":

                     return new Date(Date.parse(sValue));

                 case "string":

                 default:

                     return sValue.toString();

             }

         }

         //排序函数，iCol表示列索引，dataType表示该列的数据类型

         function compareEle(iCol, dataType) {

             return function (oTR1, oTR2) {

                 var vValue1 = convert(removeHtmlTag($(oTR1.cells[iCol]).html()), dataType);

                 var vValue2 = convert(removeHtmlTag($(oTR2.cells[iCol]).html()), dataType);

                 if (vValue1 < vValue2) {

                     return -1;

                 }

                 else {

                     return 1;

                 }

             };

         }

         //去掉html标签

         function removeHtmlTag(html) {

             return html.replace(/<[^>]+>/g, "");

         }

     </script>

 </head>

 <body>

     <table id="tableId" class="tbl-list" cellpadding="0" cellspacing="0" style="table-layout:fixed;">

         <thead>

             <tr>

				 <td  rowspan="2" >序号</td>

                 <td width="100px" rowspan="2" onclick="sortAble(this,'tableId', 0,1,'string')"

                     style="cursor:pointer">姓名</td>

                 <td width="200px"  rowspan="2"  onclick="sortAble(this,'tableId',0, 2, 'date')"

                     style="cursor:pointer">生日</td>

                 <td width="200px" colspan="2"  style="cursor:pointer">年龄</td>

                 <td width="100px"  rowspan="2"  onclick="sortAble(this,'tableId', 0,4, 'float')"

                     style="cursor:pointer">工资</td>

             </tr>

			 <tr>

				<td  onclick="sortAble(this,'tableId', 1, 0, 'int')"  style="cursor:pointer">age 1</td>

				<td  onclick="sortAble(this,'tableId', 1, 1, 'int')"  style="cursor:pointer">age 2</td>

			 </tr>

         </thead>

         <tbody>

             <tr group="A">

                 <td>1</td>

                 <td>Group-A</a></td>

                 <td>01/12/1982</td>

                 <td>25</td>

				 <td>26</td>

                 <td>1000.50</td>

             </tr>

             <tr group="B">

                 <td>4</td>

                 <td>Group-B</a></td>

                 <td>10/14/1999</td>

                 <td>18</td>

				 <td>19</td>

                 <td>1000.20</td>

             </tr>

             <tr group="C">

                 <td>7</td>

                 <td>Group-C</a></td>

                 <td>10/14/1980</td>

                 <td>8</td>

				 <td>20</td>

                 <td>1000.30</td>

             </tr>

         </tbody>

     </table>

 </body>

 </html>

js获取tr，td内容并排序的更多相关文章

  1. js 获取浏览器显示内容的宽度和高度

      js获取浏览器显示内容的宽度和高度 CreateTime--2017年7月10日17:24:12Author:Marydon 1.获取浏览器屏幕显示d的网页宽度 /** * 得到浏览器显示的屏幕高 ...

  2. DOM操作 、js获取id的内容 和修改原来的内容（innerHTML）

    js获取id的内容(getElementById) 和修改原来的内容(innerHTML) 1.通过ID获取元素 学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的 ...

  3. js获取,设置FCKeditor内容

    // 获取编辑器中HTML内容 function getEditorHTMLContents(EditorName) {     var oEditor = FCKeditorAPI.GetInsta ...

  4. 非正规写法获取不到tr,td

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jquery、js获取table,遍历输出tr中各个td的内容。

    首先,依赖jquery.. $('#btntb').click(function(){ $('#tab tr').each(function(i){ // 遍历 tr $(this).children ...

  6. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  7. js获取iframe里的body内容

    做个页面 需要加入a.html 使用的js动态添加iframe 直接JQ添加的 代码 $(".banner-box").after(“<iframe src="ht ...

  8. JQuery td内容获取，修改

    业务需求:获取某个表格中每一行第四个td内容,并根据内容为当前td重新赋值 $(".listtable.table.table-striped.table-bordered.table-ho ...

  9. JS动态创建Table,Tr,Td并赋值

    JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...

随机推荐

  1. Oracle中sys和system用户的区别

    1.数据库的启动需要以SYSDBA/SYSOPER身份登录. 2.如果在同一主机上使用IPC连接到数据库使用操作系统授权,登录任何一个用户都可以拥有as sysdba和as sysoper. 3.sy ...

  2. Windows下WordPress搭建博客过程

    搭建环境:Win7 + XAMPP5.5 + wordpress4.5.1 官网下载安装包,解压,拷贝到网站根目录(D:\IT\XAMPP5.5\htdocs\),重命名为blog(随意) 创建数据库 ...

  3. form里面的action和method（post和get的方法）使用

    一.form里面的action和method的post使用方法 <%@ Page Language="C#" AutoEventWireup="true" ...

  4. （转）J2EE中13个规范

       今天在做连接oracle数据库的时候,感受到了什么是规范.平时听到别人说学习j2ee一定要学习他的十三个规范,大概的知道每个规范是做什么的,每个“接口”是做什么的.          很早就听过 ...

  5. laravel5.2/laravel5.3入门指南 Windows 上快速安装并运行 Laravel 5.x

    1 首先要搭建本地服务器环境推荐phpstudy2016及wampServer3.0.6 下载链接可参考 http://www.cnblogs.com/zzcit/p/5823742.html 注意一 ...

  6. Linux入门（六）ubuntu下vim编辑器安装与使用

    原文链接:http://jingyan.baidu.com/article/219f4bf7d03187de452d3862.html 一.安装 vim 控制台版本的vim随ubuntu一起发行,因此 ...

  7. 一行一行分析JQ源码学习笔记-02

    1.防止冲突    设置新变量保存

  8. IOS真机Profile时调用树中的对象只是显示地址，没有显示symbol name

    解决问题的办法: 1.确认工程设置中的Scheme,profile选项对应的是debug版本还是release版本 2.确认工程设置中debug版本或者release版本是否生成了符号表 " ...

  9. STL学习：STL库vector、string、set、map用法

    本文仅介绍了如何使用它们常用的方法. vector 1.可随机访问,可在尾部插入元素:2.内存自动管理:3.头文件#include <vector> 1.创建vector对象 一维: (1 ...

  10. HashMap和HashSet的源代码分析

    static final int DEFAULT_INITIAL_CAPACITY = 1 << 4; // aka 16 static final float DEFAULT_LOAD_ ...