<HTML>
<HEAD>
<TITLE>JS实现table列排序</TITLE>
<script>
//调用比较函数
function sortTable(id,rowNum){
var oTable = document.getElementById(id);//获取以id为id的table对象
var oTbody = oTable.tBodies[0];//获取第一个tBody
var oRows = oTbody.rows;//获取tBody的所有的行
var aTRs = new Array;//新建一个数组
for (var i=0;i < oRows.length ;i++ ){
aTRs[i] = oRows[i];//循环将所有行换到新的数组
}
aTRs.sort( function(oTR1,oTR2){
var s1 = oTR1.cells[rowNum].firstChild.nodeValue;//比较行的内容的值
var s2 = oTR2.cells[rowNum].firstChild.nodeValue;//比较行的内容的值
return parseInt(s1)-parseInt(s2);//进行比较
});//对数组进行比较,是通过新的数组的行比较
var otemp = document.createDocumentFragment();//创建文档碎片
for (var i = 0;i<aTRs.length ;i++ ){
otemp.appendChild(aTRs[i]);//分别将每行加入到文档碎片中
}
oTbody.appendChild(otemp);//将文档碎片添加到文档中
}
</script>
</HEAD>
<BODY>
<table id="t" >
<thead>
<tr>
<button onclick = "sortTable('t',0);">按照第一列排序</button>
<button onclick = "sortTable('t',1);">按照第二列排序</button>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>1</td></tr>
<tr><td>10</td><td>6</td></tr>
<tr><td>3</td><td>5</td></tr>
<tr><td>5</td><td>4</td></tr>
<tr><td>2</td><td>3</td></tr>
<tr><td>9</td><td>9</td></tr>
</tbody>
</BODY>
</HTML>
分享到：
相关推荐
本资源“js 实现 table 行排序 TableOrder.rar”提供了一个实用的方法来实现这个功能。以下是对该实现的详细说明： 1. **HTML表格结构**： 在HTML中，`<table>`元素用于创建表格，`<tr>`表示表格行，`<th>`表示...
本篇文章将深入探讨如何使用 JavaScript 来实现表格数据的排序。 首先，我们需要了解 HTML `<table>` 的结构。一个简单的表格由 `<table>` 开始，包含多个 `<tr>`（行）元素，每个行中又有若干个 `<td>`（单元格）...
"table列排序、列拖动、列宽度变化、行交换"这些功能是网页数据展示中常见的需求，能够极大地提升用户操作的便捷性和数据管理的有效性。下面我们将详细探讨这些知识点。 首先，**表头列排序**是一种常见于数据表格...
"豪华版js实现table动态排序"是一个针对网页表格进行动态排序的解决方案，它允许用户通过点击表头来切换排序依据，同时还能设定某些列不参与排序。以下是对这个主题的详细讲解： 1. **JavaScript基础**：JavaScript...
"实现table表格可按行拖拽，按列排序，并可以保存排序后的结果"是一个常见的需求，尤其适用于数据展示和管理的场景。这里我们将详细探讨如何利用jQuery、jQuery.tablesorter和jQuery.tablednd_0_5这三个JavaScript库...
在JavaScript（js）中，对HTML表格（Table）进行排序是一项常见的需求，特别是在网页交互和数据展示中。...在提供的"js对table的完整排序"文件中，应该包含了完整的实现代码，供学习者参考和实践。
在JavaScript的世界里，实现表格（table）数据的自动排序是一项常见的需求。这通常涉及到对HTML DOM的操作以及数据处理。在给定的资源中，“原生js table表格自动排序效果”提供了一个无需依赖任何外部库（如jQuery...
"js排序表格，实现按列排序"这个主题主要涉及JavaScript（js）如何用于实现对HTML表格的动态排序，同时结合CSS样式提升表格的美观度。 首先，我们需要理解HTML表格的基本结构，它由`<table>`标签定义，内部包含`...
在网页开发中，数据展示通常会使用表格（Table）元素，而为了使用户能更方便地浏览和理解数据，我们常常需要实现表头点击时自动排序的功能。这个功能的实现主要依赖于JavaScript，因为它提供了对DOM操作和事件监听的...
综上所述，实现“点击table表头字段带箭头标示”的功能涉及到了JavaScript事件处理、DOM操作、数组排序以及UI交互设计。这不仅是提高用户体验的重要手段，也是前端开发者必备的技能之一。通过不断实践和学习，我们...
table列点击排序功能JS实现，表单table显示的时候，点击表单列名实现升序以及降序功能！
1. **JavaScript**：在网页应用中，JavaScript是最常用的实现动态排序的语言。库如jQuery、AngularJS、Vue.js等提供了方便的API来处理表格排序。例如，使用jQuery的插件如DataTables，可以轻松实现点击表头进行排序...
本篇将深入探讨如何利用JavaScript（js）实现表格数据的动态排序，让您的网页效果更加强大且易于学习。 首先，我们需要了解HTML中的`<table>`元素结构。一个基本的表格包括`<table>`、`<tr>`（行）、`<th>`（表头）...
综上所述，"Blue Table"是一个强大的JavaScript表格插件，提供了点击列排序和选择行的功能，这对于任何需要处理大量数据的Web应用都是宝贵的工具。通过理解其内部机制和提供的API，开发者能够创建出具有高效数据操作...
实现拖动功能可能需要用到第三方库，如 `sortablejs`，它是一个轻量级的库，专门用于实现元素的拖放排序。将 `sortablejs` 引入项目后，可以监听其提供的 `start`, `move`, 和 `end` 事件，结合 Vue 的数据绑定机制...
本文将详细讲解如何实现JS拖拽Table表格列排序的功能，并结合提供的"js拖拽Table表格列排序.rar"文件进行解析。 首先，我们需要理解HTML中的Table结构。一个基本的HTML Table由`<table>`标签开始，内部包含`<tr>`...
本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们要理解HTML表格的基本结构，它由`<table>`、`<tr>`（行）、`<th>`（表头）和`<td>`（单元格）组成。排序功能通常针对`<th>`元素，因为它们...
《js-table-sorter：纯JavaScript实现的表格头排序解析》 在Web开发中，数据的展示和处理是一项常见的任务，而表格（Table）是数据展示的常见方式之一。当表格中的数据量较大或者需要频繁更新时，用户通常期望能够...
在这个特定的案例中，我们关注的是如何实现`el-table`的无限滚动、列显示控制以及非JSON方式的列排序。下面将详细阐述这些功能的实现方法。 首先，**无限滚动**是提高用户体验的一种常见技术，特别是在处理大量数据...