<!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>
<title>Untitled Page</title>
<script type="text/javascript" src="Jquery/jquery-1[1].3.2.min.js"></script>
<script type="text/javascript" src="Jquery/HTMLPage3.js"></script>
<link type="text/css" rel="Stylesheet" href="css/HTMLPage3.css" />
</head>
<body>
<table class="sortable" border=1>
<thead>
<tr>
<th class="sort-alpha">Title</th>
<th>Author</th>
<th>Content</th>
</tr>
</thead>
<tbody>
<tr>
<td>DeadNotes</td>
<td>David</td>
<td>aaaaaaaaa</td>
</tr>
<tr>
<td>Crate</td>
<td>Author</td>
<td>bbbbbbbb</td>
</tr>
<tr>
<td>Bob</td>
<td>Author</td>
<td>cccccccc</td>
</tr>
</tbody>
</table>
</body>
</html>
.hoverstyle
{
background-color:Purple;
}
.odd
{
background-color:Yellow;
}
.even
{
background-color:Blue;
}
.clickable
{
background-color:Red;
}
var alterRowColor=function($table){
$("table.sortable tbody tr:odd").removeClass().addClass("odd");
$("table.sortable tbody tr:even").removeClass().addClass("even");
return this;
};
$(document).ready(function(){
//找到类名为sortable的table标签
$("table.sortable").each(function(){
var $_table=$(this);
alterRowColor($_table);
//找到这个table下的th标签，并遍历它，并把它的每一列都赋值给回调函数
$("th",$_table).each(function(column){
//判断找到的th标签的class属性是否是sort-alpha
if($(this).is(".sort-alpha"))
{
//为他添加css样式
$(this).addClass("clickable");
//为他添加单击属性
$(this).click(function(){
//找到所有所需table下tbody标签下的tr标签组
var rows=$_table.find("tbody>tr").get();
//遍历rows数组并把每行的td子节点的当前列的列值转化为大写字母
$.each(rows,function(index,row){
row.sortKey=$(row).children("td").eq(column).text().toUpperCase();
});
//排序一列的值
rows.sort(function(a,b){
if(a.sortKey<b.sortKey)
{
return -1;
}
if(a.sortKey>b.sortKey)
{
return 1;
}
return 0;
});
//把排序好的每行插入tbody标签内
$.each(rows,function(index,row){
$_table.children("tbody").append(row);
row.sortKey=null;
});
alterRowColor($_table);
});
}
});
});
});
为排序后的列进行高亮显示，column是从1开始的，所以这里要进行高亮的列是需要加1，一边用户知道哪里进行了排序
$($_table).find("td").removeClass().filter(":nth-child("+(column+1)+")").addClass("highlight");
分享到：
相关推荐
如果希望在表格加载时就显示斑马线效果（即奇偶行不同颜色），可以通过传递配置对象的方式进行设置： ```javascript $(document).ready(function(){ $("#large").tableSorter({ stripingRowClass: ['odd', 'even'...
"jquery表格排序"是一个基于jQuery实现的功能，允许用户通过点击表头对表格数据进行升序或降序排序，极大地提高了用户体验。这个功能在数据分析、报告展示等场景下尤为实用。 首先，我们要了解jQuery的基本概念。...
本教程将深入探讨如何使用jQuery实现表格数据的排序功能，特别关注对中文内容的支持。 ### 1. jQuery简介 jQuery是由John Resig创建的一个轻量级的JavaScript库，它的目标是“Write Less, Do More”。jQuery通过...
标题中的“jQuery的表格排序插件”指的是使用JavaScript库jQuery实现的一种功能，允许用户在HTML表格中对数据进行动态排序。这种插件通常通过监听表格的头部点击事件，实现列数据的升序或降序排列，提升用户体验。...
标题中的“JQuery插件实现表格排序”是指在网页中使用jQuery这个JavaScript库来开发一个功能，使得HTML表格的数据能够根据用户的选择进行升序或降序排列。这通常用于提高用户体验，让用户能快速查找和理解大量信息。...
当用户点击表格的表头时，jQuery表格排序插件会根据指定的列内容进行升序或降序排序。它通过分析单元格的文本或数据来决定排序顺序，可以处理各种类型的数据，如数字、日期甚至自定义排序规则。 4. **其他相关文件...
使用`$(table).DataTable()`初始化后，只需点击表头，即可自动实现排序。 2. jQuery Sortable：这个插件主要用于拖放排序，适用于需要用户手动调整顺序的场景，如任务列表。 3. Bootstrap Table：基于Bootstrap...
标题 "jquery实现的可增加，删除行，可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验...
本资源“jQuery Table表格排序显示代码.zip”聚焦于利用jQuery实现动态表格排序的功能，这对于数据展示和用户交互至关重要。下面将详细阐述相关知识点。 1. **jQuery基础**：首先，理解jQuery的基础是至关重要的。...
这些脚本通常包含排序算法，以及与jQuery库的交互代码，用于监听表头点击事件并更新表格的DOM结构。开发者可能会使用如"$(function() {...})"这样的jQuery文档加载事件来确保脚本在页面元素加载完成后运行。 ...
在本主题“jQuery表格插件仿Excel表格排序修改效果”中，我们将深入探讨如何利用jQuery实现类似Excel的表格排序功能，并对其进行优化和定制。 首先，我们需要了解jQuery表格插件的基础。常见的jQuery表格插件有...
此插件通过Jquery框架进行封装，使得在网页上对表格数据进行动态排序变得简单易行。 #### 使用方法与参数选项 使用该插件的方法是在目标表格元素上调用`.tableSort()`方法，并传入一个配置对象。配置对象的主要...
<!... <... <head> ...meta charset="UTF-8">...表格列自由拖动排序js... 一款非常不错的表格列自由拖动排序js代码，单击鼠标长按表格列自由拖动排序，互换列排序代码，点击表格头部支持表格数据升降大小排序效果。
《jQuery实现表格列表拖动排序详解》 在网页开发中，动态交互的用户体验往往能提升用户的满意度和留存率。jQuery，作为一个轻量级的JavaScript库，提供了丰富的API和插件，使得实现各种复杂的交互效果变得轻松易行...
1. **奇偶行颜色交替**：这个功能使得表格的每一行根据其行号呈现出不同的背景色。通常，偶数行会使用一种颜色，奇数行使用另一种颜色。这种设计有助于提高可读性，使用户能够更容易地跟踪他们正在查看的数据行，...
当我们需要在网页中实现表格数据的排序功能时，jQuery提供了一种简单易用的方法。本篇文章将深入探讨如何使用jQuery实现表格排序，以及与之相关的知识点。 首先，我们看到的`TableOrder('ordert',3,0,1)`函数是用于...
而“使用jQuery UI实现表格排序功能”是网页交互设计中的常见需求，尤其对于数据展示丰富的网页，如报表、数据分析页面等。jQuery UI 的 tablesorter 插件可以方便地实现这一功能，让表格数据可以根据用户的需求进行...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。...在实际项目中，可以根据具体需求选择不同的jQuery表格排序插件，比如DataTables、jqGrid或其他类似解决方案。
本篇文章将深入探讨如何使用jQuery实现简单的表格排序。 首先，引入jQuery库是必不可少的。你可以通过CDN（内容分发网络）或者本地文件来引入，例如： ```html <script src="https://code.jquery....