小弟第一次发帖，希望大家指教
HTML页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<TABLE id="orderTable" style="border:#C0CACD solid 1px; ">
<TR>
<TD class="orderTd" dataType="num">编号</TD>
<TD class="orderTd">名字</TD>
<TD class="orderTd" dataType="num">年龄</TD>
<TD class="orderTd" dataType="num">学号</TD>
<TD class="orderTd" dataType="char">班级</TD>
</TR>
<TBODY>
<TR>
<TD>01023</TD>
<TD>张三</TD>
<TD>23</TD>
<TD>2009090233</TD>
<TD>三年二班</TD>
</TR>
<TR>
<TD>09234</TD>
<TD>李四</TD>
<TD>34</TD>
<TD>20100931</TD>
<TD>三年四班</TD>
</TR>
<TR>
<TD>034512</TD>
<TD>王五</TD>
<TD>12</TD>
<TD>20080323</TD>
<TD>一年五班</TD>
</TR>
<TR>
<TD>45445</TD>
<TD>丁柳</TD>
<TD>43</TD>
<TD>20010923</TD>
<TD>七年五班</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
Script
<script>
(function(){
var d = document,
$ = function(id){return d.getElementById(id)},
ot = $("orderTable"),
hds = ot ? ot.rows[0].getElementsByTagName("td") : "",
tClass = "orderTd",
orderT = function(){
var odb = ot.getElementsByTagName("tbody")[1],
tv = new Array(),
nodb = d.createElement("tbody"),
otype = this.orderType || "desc";
this.orderType = otype == "desc" ? "asc" : "desc";
//取得排序列的文本，序号
for(var i=1, ci; ci=ot.rows[i]; i++){
tv[i-1] = [ci.cells[this.index].innerHTML, i];
}
//排序
if(this.dataType && this.dataType == "num"){
tv.sort(function(a, b){
return otype == "desc" ? +a[0]- +b[0] : +b[0]- +a[0];
})
}else{
tv.sort(function(a, b){
return otype == "desc" ? a[0].localeCompare(b[0]) : b[0].localeCompare(a[0]);
})
}
//创建新的tbody, tr, td
for(var i=0, ci; ci=tv[i]; i++){
var otr = ot.rows[ci[1]];
ot.appendChild(nodb);
ntr = d.createElement("tr");
nodb.appendChild(ntr);
for(var j=0, cj; cj=otr.cells[j]; j++){
ntd = d.createElement("td");
ntd.innerHTML = cj.innerHTML;
ntr.appendChild(ntd);
}
}
//删除旧的tbody
ot.removeChild(odb);
};
//给需要排序的td加上onclick事件
for(var i=0, ci; ci=hds[i]; i++){
ci.index = i;
if(ci.className && ci.className == tClass){
ci.style.cursor = "pointer";
ci.onclick = orderT;
}
}
})()
</script>
希望大家能给之处不足之处
分享到：
相关推荐
以下是一些关于“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 表格拖拽排序"，这是一种允许用户通过鼠标拖放操作来改变表格行顺序的功能。这个特性尤其适用于那些需要频繁调整数据顺序的场景，比如任务管理或者项目进度跟踪。 ...