<!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>javaScrip基于对象</title>
<style type="text/css">
<!--
.theadCss {
color: #FFF;
background-color: #000;
}
-->
</style>
<script language="javascript" src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(
function(){
//添加根据不同的列排序
$("thead > tr >td").eq(0).click(function(){sortTable(0);});
$("thead > tr >td").eq(1).click(function(){sortTable(1);});
$("thead > tr >td").eq(2).click(function(){sortTable(2);});
});
function sortTable(indexs){
//通过.get() 获取DOM元素(把jQuery 元素转换为DOM 元素)
var rows = $("tbody>tr").get();
//sort 排序
rows = rows.sort(function(a,b){
//排序不区分大小写
var keyA = $(a).find("td").eq(indexs).text().toUpperCase();
var keyB = $(b).find("td").eq(indexs).text().toUpperCase();
if(keyA < keyB){return -1;}
if(keyA > keyB){return 1;}
return 0;
});
//全部重新从尾部插入，这里因为已存在就移动到尾部
$.each(rows,function(index,row){$("table>tbody").append(row);});
}
</script>
</head>
<body>
<table >
<!-- 这里用thead,tbody 是为了方便 使用选择器 -->
<thead class="theadCss">
<tr>
<td>标号</td>
<td>名称</td>
<td>备注</td>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>doc</td>
<td>word</td>
</tr>
<tr>
<td>2</td>
<td>window</td>
<td>MicroSoft</td>
</tr>
<tr>
<td>3</td>
<td>kingsoft</td>
<td>wps</td>
</tr>
<tr>
<td>1</td>
<td>google</td>
<td>great</td>
</tr>
<tr>
<td>5</td>
<td>baidu</td>
<td>sb</td>
</tr>
</tbody>
</table>
</body>
</html>
分享到：
相关推荐
本篇文章将深入探讨jQuery表格排序的相关知识点。 一、基本概念 1. jQuery：jQuery是一个轻量级的JavaScript库，它的API设计简洁易用，能够快速地进行DOM操作，减少开发者的工作负担。 2. 表格（Table）：HTML中...
"jquery表格排序"是一个基于jQuery实现的功能，允许用户通过点击表头对表格数据进行升序或降序排序，极大地提高了用户体验。这个功能在数据分析、报告展示等场景下尤为实用。 首先，我们要了解jQuery的基本概念。...
通过结合jQuery和JavaScript的内置方法，我们可以轻松地实现一个功能完备且支持中文的表格排序功能。这不仅提高了用户体验，也为数据展示提供了更多灵活性。实际应用中，还可以根据项目需求进一步定制和扩展此功能。
### Jquery表格排序插件详解：tableSort #### 插件概述 Jquery表格排序插件，名为tableSort，由作者wjy开发于2010年12月，主要功能是提供对HTML表格数据的排序操作，支持快速排序及复杂排序算法。此插件通过Jquery...
使用jQuery表格排序插件的主要步骤可能包括： 1. **引入依赖**：首先在HTML文件中引入jQuery库和表格排序插件的JavaScript和CSS文件。 2. **初始化插件**：通过JavaScript选择表格元素并调用插件方法，如`$("#...
本文将详细探讨"jQuery表格排序插件"这一主题，结合提供的标签和压缩包文件名称，我们可以推测这是一个包含源码、示例、样式和图像资源的完整插件包。 首先，让我们来理解jQuery表格排序插件的核心功能。此类插件...
而"jquery表格排序插件"是jQuery生态中的一个重要组件，用于增强网页中表格的功能，特别是提供数据的动态排序能力。这样的插件使得用户可以方便地按照表格列的值对数据进行升序或降序排列，提升用户体验。 jQuery...
在这个“jquery表格排序和筛选表.rar”压缩包中，我们重点关注的是如何利用jQuery来实现表格数据的排序和筛选功能，这对于前端开发来说是十分常见的需求。 首先，让我们了解表格排序。在网页中，表格（`<table>`...
在“jquery表格排序搜索”这个主题中，我们将深入探讨如何利用jQuery实现功能丰富的表格，包括数据的排序和搜索功能。 首先，jQuery的表格排序功能允许用户通过点击表头来对表格数据进行升序或降序排列。这通常涉及...
在这个“jquery表格排序和筛选表”的主题中，我们将深入探讨如何利用jQuery实现表格数据的排序和筛选功能，这对于前端开发尤其是后台界面展示至关重要。 首先，让我们了解一下表格（Table）的基本结构。HTML表格由`...
本示例“jquery表格排序操作”是基于jQuery实现的，旨在帮助开发者快速集成和实现表格数据的动态排序功能，尤其适用于myeclipse开发环境。开源精神是其核心，提倡分享与互助，无需积分即可获取和使用。 表格排序...
#### 知识点一：jQuery表格排序插件介绍 在Web开发中，数据展示经常需要通过表格的形式呈现给用户，并且为了方便用户查找所需信息，通常会提供排序功能。传统的表格排序往往需要后端的支持，但这种方式可能会增加...
"两个非常不错的 jQuery表格排序效果"这个标题暗示我们将探讨两种高效且用户体验良好的jQuery插件，用于实现表格数据的动态排序。 第一个知识点是jQuery的tablesorter插件。Tablesorter是一个开源的jQuery插件，由...
**jQuery表格排序** jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。在jQuery中实现表格排序是一项常见的任务，特别是在动态数据展示和用户交互丰富的网页应用中。本示例将...
这是一款仿Excel样式的jquery表格排序插件。该jquery表格排序插件基于bootstrap表格，它表格列支持按英文字母或数字的升序和降序排列，支持在表格列中按关键字进行搜索，支持过滤不需要的表格列。