js获取tr，td内容并排序
如题
<!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内容并排序的更多相关文章
- js 获取浏览器显示内容的宽度和高度
js获取浏览器显示内容的宽度和高度 CreateTime--2017年7月10日17:24:12Author:Marydon 1.获取浏览器屏幕显示d的网页宽度 /** * 得到浏览器显示的屏幕高 ...
- DOM操作 、js获取id的内容 和修改原来的内容（innerHTML）
js获取id的内容(getElementById) 和修改原来的内容(innerHTML) 1.通过ID获取元素 学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的 ...
- js获取,设置FCKeditor内容
// 获取编辑器中HTML内容 function getEditorHTMLContents(EditorName) { var oEditor = FCKeditorAPI.GetInsta ...
- 非正规写法获取不到tr,td
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery、js获取table,遍历输出tr中各个td的内容。
首先,依赖jquery.. $('#btntb').click(function(){ $('#tab tr').each(function(i){ // 遍历 tr $(this).children ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- js获取iframe里的body内容
做个页面 需要加入a.html 使用的js动态添加iframe 直接JQ添加的 代码 $(".banner-box").after(“<iframe src="ht ...
- JQuery td内容获取，修改
业务需求:获取某个表格中每一行第四个td内容,并根据内容为当前td重新赋值 $(".listtable.table.table-striped.table-bordered.table-ho ...
- JS动态创建Table,Tr,Td并赋值
JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...
随机推荐
- linux中ssh登录Permanently added (RSA) to the list of known hosts问题解决
文章出自http://www.2cto.com/os/201307/227199.html linux中ssh登录Permanently added (RSA) to the list of know ...
- UVALive 6910 Cutting Tree（并查集应用）
总体来说,这个题给的时间比较长,样例也是比较弱的,别的方法也能做出来. 我第一次使用的是不合并路径的并查集,几乎是一种暴力,花了600多MS,感觉还是不太好的,发现AC的人很多都在300MS之内的过得 ...
- zTree模糊查询人员姓名：getNodesByParamFuzzy
以前使用zTree,不知道有getNodesByParamFuzzy这个模糊查询的方法,所以用了比较笨的方法,比如:功能要求(模糊查询人员姓名),先获得用户输入的名称,然后到数据库或者缓存中去查找,然 ...
- 安装CocoaPods流程及常见问题(Xcode->homebrew->RVM->Ruby->CocoaPods)
一.HomeBrew 1.(转)HomeBrew的安装和简单使用 http://blog.csdn.net/maojudong/article/details/7918291 2.homebrew的简 ...
- WCF初接触实作
我们通过实现一个简单的示例来对WCF有个直观而浅显的认识,希望对初次涉及WCF的朋友有所帮助. 可以简单地认为WCF程序分为4部分:契约.服务.宿主.客户端.我们通过一个例子来逐步完成各部分,示例程序 ...
- Sass编译Css
1.我新建了一个项目工程 2.路径在 3.编译 sass 要编译的sass文件名.scss ../存放编译后的css目录/编译后的css名称.css 4.刷新项目,就编译出来了 6.当然,你要嫌麻烦的 ...
- Effective JavaScript ：第一章
第一章 一.严格模式与非严格模式 1.在程序中启用严格模式的方式是在程序的最开始增加一个特定的字符串字面量: ‘use strict’ 同样可以在函数体的开始处加入这句指令以启用该函数的严格模式. f ...
- 使用jQuery的hover事件在IE中不停闪动的解决方法
在使用jQuery的hover事件时,经常会因为鼠标滑动过快导致菜单不停闪动的情况,相信很多朋友都遇到过自己做的纵向下拉菜单不停的收缩,非常的讨厌.今天在给一个网站设计菜单时也遇到了这个情况,结果在百 ...
- mysql去重的最方便的两种方法
参考资料:http://blog.csdn.net/guocuifang655/article/details/3993612 方法一: 在使用mysql时,有时需要查询出某个字段不重复的记录,虽然m ...
- 2、为Eclipse绑定Tomcat
1.window→preferences打开属性窗口 2.点击add 3.点击Tomcat6.0 点击next 4.选择tomcat的解压目录和jdk,并点击finish 5.点击ok 6.打开ser ...