<html>
<head>
<title>SortTable2</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var k=0;
/**//**************************************************************************
排序的主方法，有三个形参，STableTd,iCol,sDataType分别为需要排序的表格ID，
需要排序的表格列号，所在列的数据类型（支持int,float,date,string四种数据类型)
**************************************************************************/
function sortTable(sTableId,iCol,sDataType)
{
var oTable=document.getElementById(sTableId);//获取表格的ID
var oTbody=oTable.tBodies[0]; //获取表格的tbody
var colDataRows=oTbody.rows; //获取tbody里的所有行的引用
var aTRs=new Array(); //定义aTRs数组用于存放tbody里的行
for(var i=0;i<colDataRows.length;i++) //依次把所有行放如aTRs数组
{
aTRs.push(colDataRows[i]);
}
/**//***********************************************************************
sortCol属性是额外给table添加的属性，用于作顺反两种顺序排序时的判断，区分
首次排序和后面的有序反转
************************************************************************/
if(oTable.sortCol==iCol) //非首次排序
{
aTRs.reverse();
}
else //首次排序
{
if(k%2==0) //升序
{
aTRs.sort(generateCompareTRs(iCol,sDataType));
}
else if(k%2==1) //降序
{
aTRs.sort(generateCompareTRs1(iCol,sDataType));
}
}
var oFragment=document.createDocumentFragment(); //创建文档碎片
for(var i=0;i<aTRs.length;i++) //把排序过的aTRs数组成员依次添加到文档碎片
{
oFragment.appendChild(aTRs[i]);
}
oTbody.appendChild(oFragment); //把文档碎片添加到tbody,完成排序后的显示更新
oTable.sortCol=iCol; //把当前列号赋值给sortCol,以此来区分首次排序和非首次排序,//sortCol的默认值为-1
};
//比较函数，用于两项之间的排序
//升序
function generateCompareTRs(iCol,sDataType)
{
return function compareTRs(oTR1,oTR2)
{
var vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
var vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
if(vValue1<vValue2)
{
return -1;
}
else if(vValue1>vValue2)
{
return 1;
}
else
{
return 0;
}
};
};
//降序
function generateCompareTRs1(iCol,sDataType)
{
return function compareTRs(oTR1,oTR2)
{
var vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
var vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
if(vValue1>vValue2)
{
return -1;
}
else if(vValue1<vValue2)
{
return 1;
}
else
{
return 0;
}
};
};
//数据类型转换函数
function convert(sValue,sDataType)
{
switch(sDataType)
{
case "int":return parseInt(sValue);
case "float": return parseFloat(sValue);
case "date":return new Date(Date.parse(sValue));
default:return sValue.toString();
}
};
</script>
</head>
<body>
<form name="f1" id="f1" action="" method="post">
<span style="size:12px">↑↓</span>
<table border="1" id="tblSort" sortCol="-1">
<thead>
<tr>
<th onClick="sortTable('tblSort',0);" style="cursor:pointer">Last Name</th>
<th onClick="sortTable('tblSort',1)" style="cursor:pointer">First Name</th>
<th onClick="sortTable('tblSort',2,'date')" style="cursor:pointer">Birthday</th>
<th onClick="sortTable('tblSort',3,'int')" style="cursor:pointer">Silbings</th>
</tr>
</thead>
<tbody>
<tr>
<td>Simth</td>
<td>John</td>
<td>7/12/1978</td>
<td>2</td>
</tr>
<tr>
<td>Johnson</td>
<td>Betty</td>
<td>5/12/1965</td>
<td>5</td>
</tr>
<tr>
<td>Henderson</td>
<td>Nathan</td>
<td>10/15/1977</td>
<td>3</td>
</tr>
<tr>
<td>Willianms</td>
<td>James</td>
<td>2/25/1949</td>
<td>1</td>
</tr>
<tr>
<td>Gilliam</td>
<td>Michael</td>
<td>7/8/1980</td>
<td>4</td>
</tr>
<tr>
<td>Walker</td>
<td>Matthew</td>
<td>6/18/1981</td>
<td>3</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
分享到：
相关推荐
以下是一些关于“html中table排序”的关键知识点： 1. **静态排序**： - HTML的`<table>`标签提供了基本的表格结构，如`<thead>`（表头）、`<tbody>`（主体内容）、`<tfoot>`（表尾）等，但它们不具备排序功能。 ...
本篇将围绕"实现table排序（以备不时之需）"这一主题，详细讲解如何利用jQuery及其插件来实现表格数据的动态排序。 首先，我们看到标签中提到了"源码"和"工具"，这意味着我们将探讨一段具体的代码和可能使用的工具...
在JavaScript（js）中，对HTML表格（Table）进行排序是一项常见的需求，特别是在网页交互和数据展示中。...在提供的"js对table的完整排序"文件中，应该包含了完整的实现代码，供学习者参考和实践。
在JavaScript的世界里，Table排序是一种常见的需求，尤其是在网页开发中，我们经常需要对HTML表格的数据进行动态排序，以便用户能够方便地浏览和分析信息。"SortTable.js"这个文件就是为了实现这一功能而设计的，它...
在JavaScript中，对HTML表格（`<table>`）进行排序是一项常见的需求，特别是在动态数据展示和用户交互的应用中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们要理解HTML表格的基本结构，...
本主题聚焦于jQuery插件中的一个关键功能：table排序。"jQuery插件集之(table排序)各种排序+Demo"提供了一种高效、灵活的方式来组织和操作HTML表格中的数据。 1. **jQuery插件的使用** jQuery插件通常是开发者为了...
在网页开发中，"table排序和分页"是常见的数据展示功能，特别是在处理大量结构化数据时。Table，也就是表格，是一种直观、清晰地展示数据的方式。本篇将深入探讨table排序和分页的实现机制及其重要性。 一、Table...
这个技术主要用于提升用户体验，使得用户可以方便地根据表格中的...通过这些更新，JavaScript Table排序2.0不仅提升了用户体验，也提供了更强大、更灵活的功能，使得开发者可以轻松地在项目中集成和定制表格排序功能。
table table自定义列排序；目前支持数值排序，文本（支持中文）排序； 示例： var option = { tableid: '#tableid', sortindex: 7, sorttype: "down", sortby: "text" }; $("#tableid").sortTable(option);
本篇文章将深入探讨“jQuery Table Sort”插件，这是一种专门用于在jQuery环境下对表格数据进行排序的工具。 首先，我们要理解jQuery Table Sort插件的基本工作原理。这个插件允许用户通过点击表格的表头来实现数据...
JavaScript表格排序是网页开发中常见的需求，特别是在处理动态数据或者用户交互时。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们需要理解HTML `<table>`元素的基本结构。一个表格由`...
本文将深入探讨“table排序”的相关知识点，包括其原理、实现方式以及在不同场景下的应用。 首先，我们要理解什么是表格排序。在计算机科学中，表格（Table）是一种组织和展示数据的有效方式，而排序则是按照特定的...
在这个"很好用的javascript_table排序"示例中，我们可以通过分析源代码来学习如何实现这个功能。虽然这个实现可能并不完美，但它提供了一些基本的技巧和原理，有助于理解JavaScript如何处理表格数据的排序。 首先，...
JavaScript表格排序是一个常见的需求，特别是在网页中展示数据时。它允许用户通过点击表头来对数据进行升序或降序排列。在这个实例中，我们将深入探讨JavaScript如何实现表格的动态排序。 首先，我们需要理解HTML...
在网页开发中，数据展示是不可或缺的一部分，而表格（Table）是常见的数据组织形式。当数据量较大或者需要用户交互时，对表格内容进行排序就显得尤为重要。本篇将深入探讨如何利用JavaScript（js）实现表格数据的...
//需要排序的表头，以th开头 $('#keyword_num, #impressions, #click, #click_rate, #conversions, #cost, #conversion_unitprice') .each(function(){ var th = $(this), thIndex = th.index(), inverse = ...
程序的实现的是在客户端对表格进行排序，有以下特点： 1.自定义排序列、排序属性（例如innerHTML）、排序数据类型（包括int、float、date、string）、排序顺序（顺序和倒序）； 2.自定义排序函数； 3.可同时设置...
在本主题中，我们关注的是"bootstrap-table.css 表格拖拽排序"，这是一种允许用户通过鼠标拖放操作来改变表格行顺序的功能。这个特性尤其适用于那些需要频繁调整数据顺序的场景，比如任务管理或者项目进度跟踪。 ...