<!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>无标题文档</title>
<link rel="stylesheet" href="tab.css" />
<script type="text/javascript" src="../Day26/doctool.js"></script>
<script type="text/javascript">
/*
表格中按照年龄的顺序进行排序。
思路：
1，每一个人的信息是一行。
那么先将行都取出，临时存入到数组中，
2，并对数组中的行对象的其中一个单元格中的数据进行排序。
3，将排序后的行对象重新添加会表格对象中。
*/
var b = true;
function sorttab()
{
//1,获取表格中所有的行对象。
var tabNode = byTag("table")[0];
var arr = tabNode.rows;
//2,定义临时容器，将表格中需要参与排序的行对象临时存储。
var arr = new Array();//临时容器中存入的都是表格行对象引用。
for(var x=1; x<trs.length; x++)
{
arr[x-1] = trs[x];
}
sortt(arr);
//alert(arr.length);
var tbdNode = tabNode.childNodes[0];
//alert(tbdNode.nodeName);
if(b)
{
for(var x=0; x<arr.length; x++)
{
//alert(arr[x].cells[0].innerText+"..."+arr[x].cells[1].innerText);
tbdNode.appendChild(arr[x]);
}
b = false;
}
else
{
for(var x=arr.length-1; x>=0; x--)
{
//alert(arr[x].cells[0].innerText+"..."+arr[x].cells[1].innerText);
tbdNode.appendChild(arr[x]);
}
b = true;
}
}
function sortt(arr)
{
for(var x=0; x<arr.length; x++)
{
for(var y=x+1; y<arr.length; y++)
{
if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText))
{
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" onclick="sorttab()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>30</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>4</td>
<td>上海</td>
</tr>
<tr>
<td>王武</td>
<td>23</td>
<td>广州</td>
</tr>
<tr>
<td>赵六</td>
<td>27</td>
<td>南京</td>
</tr>
<tr>
<td>周七</td>
<td>25</td>
<td>大连</td>
</tr>
<tr>
<td>孙八</td>
<td>29</td>
<td>铁岭</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
接下来，我们讨论“排序表格内容”。在这个例子中，描述提到目前的排序功能仅支持最后一列。在jQuery中，实现表格排序通常需要借助插件，比如jQuery DataTables。这个强大的插件提供了丰富的排序、搜索和过滤功能。...
"js排序表格，实现按列排序"这个主题主要涉及JavaScript（js）如何用于实现对HTML表格的动态排序，同时结合CSS样式提升表格的美观度。 首先，我们需要理解HTML表格的基本结构，它由`<table>`标签定义，内部包含`...
在本主题中，我们将深入探讨如何利用jQuery和JavaScript实现拖拽排序功能，适用于列表、菜单和表格等元素。 一、拖拽排序基础概念 拖拽排序是一种用户交互设计，允许用户通过鼠标拖动来改变元素的顺序。这种功能在...
接下来，为了实现排序功能，我们需要在`dropHandler`中添加逻辑来重新排序表格中的行。这通常涉及到DOM操作，可能需要计算行的相对位置，并更新后端数据（如果有的话）。在大多数情况下，我们还需要考虑如何在用户...
-- 表格内容 --> $(document).ready(function(){ $("#large").tableSorter(); }); ``` 以上代码展示了如何将jQuery TableSorter插件引入到HTML文档中，并初始化表格排序功能。其中`<script>`标签用于...
这通常通过获取表格数据，对其进行排序，然后更新表格内容来完成。例如，可以使用`Array.prototype.sort()`函数，根据特定规则对数据进行比较排序。 - 对于数字排序，我们可以直接使用JavaScript的自然排序，或者...
**jQuery 简单表格排序** 在Web开发中，数据展示是常见的需求，尤其是在处理大量结构化信息时，表格（Table）是首选的布局方式。然而，为了提高用户体验，我们通常需要实现表格数据的动态排序功能。jQuery是一个轻...
tablesort表格排序.rartablesort表格排序.rartablesort表格排序.rartablesort表格排序.rartablesort表格排序.rartablesort表格排序.rartablesort表格排序.rar
它还具有内置的过滤功能，可以快速搜索表格内容，并提供了多种主题样式，以便与网站设计无缝集成。tablesorter的使用方法简单，只需要在HTML表格上应用特定的CSS类，然后在JavaScript中初始化插件即可。 jquery-...
在JavaScript中，对表格进行排序是一项常见的需求，特别是在构建交互式网页时。在这个例子中，我们探讨如何使用纯JavaScript在客户端实现表格数据的动态排序。首先，我们需要理解HTML表格的基本结构，然后学习...
本示例项目“android 表格 排序 源码”提供了实现Android表格排序功能的完整源码，用户可以点击表头对表格中的数据进行升序或降序排序。下面我们将详细讲解这个功能实现的关键知识点。 1. **使用GridView或...
在对表格进行排序之前，可以先选择整个表格，执行“复制”操作，然后在同一位置“粘贴为值”。这会创建一个新的表格副本，其顺序与原始表格相同，但不再与其他单元格链接。这样，即使排序了原始表格，仍有一个保持...
虽然具体内容未给出，但通常这类文章会包含插件的安装、初始化、自定义排序规则等教程内容，帮助开发者快速理解和应用。 标签“源码”和“工具”暗示了这个插件可能包括可下载的源代码，并且是一个用于开发目的的...
易语言高级表格排序示例,程序模仿易语言例程里面的高级列表框排序写成.
为了提升用户体验和数据管理效率，我们经常需要实现表格的排序功能，让用户可以按照表格列的值进行升序或降序排列。`tablesorter`是一个非常实用的JavaScript库，它为HTML表格提供了强大的排序功能，不仅适用于纯...
`innerHTML`的清空和重新赋值是为了确保表格内容按新的顺序显示。 这个轻量级的JavaScript表格排序实现非常实用，特别适合小型项目或对性能要求高的场景。它可以避免引入大型库的开销，同时也易于理解和维护。当然...
表格控制、内容排序，支持ASP，php，jsp等
javascript动态排序表格 javascript动态排序表格 javascript动态排序表格 javascript动态排序表格
这涉及到元素的插入和移除操作，以及可能的数据绑定，确保表格内容与排序后的数据同步。 6. **多类型排序**：描述中提到支持分类排序、数字大小排序和英文排序。这需要编写不同的比较函数来处理不同类型的数据。...
// 更新表格内容 table.tBodies[0].appendChild(fragment); } ``` 这个`sortTable`函数实现了表格数据的排序，但值得注意的是，它并没有直接修改DOM树，而是利用了文档碎片（DocumentFragment）来优化性能。文档...