使用Javascript根据table中的列值进行排序，示例代码如下
<html>
<head>
<script>
function generateCompareTRS(iCol){
return function compareTRS(oTR1, oTR2){
var sValue1= oTR1.cells[iCol].firstChild.nodeValue;
var sValue2= oTR2.cells[iCol].firstChild.nodeValue;
return sValue1.localeCompare(sValue2);
}
}
function sortTable(sTableID,iCol) {
var oTable= document.getElementById(sTableID);
var oTBody=oTable.tBodies[0];
var colDataRows =oTBody.rows;
var aTRs = new Array;
for(var i=0;i<colDataRows.length;i++){
aTRs[i]= colDataRows[i];
}
if(oTable.sortCol==iCol){
aTRs.reverse();
}else{
aTRs.sort(generateCompareTRS(iCol));
}
var oFragment=document.createDocumentFragment();
for(var i=0;i<aTRs.length;i++){
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
oTable.sortCol=iCol;
}
</script></head>
<body >
<table border="1" id="tblSort">
<thead>
<tr>
<th onclick="sortTable('tblSort',0)" style="cursor:pointer"> Last Name</th>
<th onclick="sortTable('tblSort',1)" style="cursor:pointer"> First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
</tr>
<tr>
<td>Johnson</td>
<td>Betty</td>
</tr>
<tr>
<td>Henderson</td>
<td>Nathan</td>
</tr>
<tr>
<td>Williams</td>
<td>James</td>
</tr>
<tr>
<td>Gilliam</td>
<td>Michael</td>
</tr>
<tr>
<td>Walker</td>
<td>Matthew</td>
</tr>
</tbody>
</table>
</body>
</html>
分享到：
相关推荐
step1:导入css,js,images到你的project ...step3:给要排序的table加上id="xxx" step4:定义排序列的数据类型 <script type="text/javascript"> initTableWidget('xxx',0,0,Array('S','S','S',0),false); </script>
动态排序允许用户根据表中的某一列或多个列的数据来快速调整数据的显示顺序，这极大地提高了数据的可读性和分析效率。下面将详细解释这个概念，并探讨其实现方式和相关技术。 首先，我们要理解“动态排序”的含义。...
在JavaScript（js）中，对HTML表格（Table）进行排序是一项常见的需求，特别是在网页交互和数据展示中。本文将深入探讨如何使用JavaScript实现点击表头进行动态排序，并处理各种复杂情况，如包含HTML标签的单元格、...
用于b/s前端表格数据排序的方法,使用javascript 操作table,可以选择对表格中任一部分进行排序的说
JavaScript表格排序是一个常见的需求，特别是在网页中展示数据时。它允许用户通过点击表头来对数据进行升序或降序排列。在这个实例中，我们将深入探讨JavaScript如何实现表格的动态排序。 首先，我们需要理解HTML...
在网页开发中，数据展示通常会使用表格（Table）元素，而为了使用户能更方便地浏览和理解数据，我们常常需要实现表头点击时自动排序的功能。这个功能的实现主要依赖于JavaScript，因为它提供了对DOM操作和事件监听的...
使用 JQuery 可以非常方便地获取表格（`<table>`）中某一列的所有值。下面将详细介绍如何使用 JQuery 来实现这一功能，并对给定代码片段进行解析。 #### 一、JQuery简介 JQuery 是一个快速、简洁的 JavaScript 库...
JavaScript表格排序是网页开发中常见的需求，特别是在处理动态数据或者用户交互时。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们需要理解HTML `<table>`元素的基本结构。一个表格由`...
在JavaScript中，操作HTML表格（Table）进行排序是一项常见的任务，尤其在动态数据展示和用户交互中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们需要理解HTML表格的基本结构。一个HTML...
为了在项目中使用这个优化过的插件，你需要在HTML中引入Bootstrap Table的核心库和这个扩展的CSS和JS文件，然后通过设置特定的参数和方法来启用和配置冻结列、排序、列宽和合并行功能。在开发过程中，可以利用浏览器...
以下是一些关于“html中table排序”的关键知识点： 1. **静态排序**： - HTML的`<table>`标签提供了基本的表格结构，如`<thead>`（表头）、`<tbody>`（主体内容）、`<tfoot>`（表尾）等，但它们不具备排序功能。 ...
"实现table表格可按行拖拽，按列排序，并可以保存排序后的结果"是一个常见的需求，尤其适用于数据展示和管理的场景。这里我们将详细探讨如何利用jQuery、jQuery.tablesorter和jQuery.tablednd_0_5这三个JavaScript库...
"table列排序、列拖动、列宽度变化、行交换"这些功能是网页数据展示中常见的需求，能够极大地提升用户操作的便捷性和数据管理的有效性。下面我们将详细探讨这些知识点。 首先，**表头列排序**是一种常见于数据表格...
同时，确保在`el-table`中使用`v-if`指令来决定列是否渲染。 至于**列排序**，在`el-table`中，可以使用`sortable`属性来指定列是否可排序，而`sort-method`则用于自定义排序逻辑。默认情况下，`el-table`支持对...
在JavaScript Table排序2.0的更新中，可能包括以下改进： - **性能优化**：对于大数据量的表格，可能会采用更高效的排序算法，如快速排序或归并排序，以减少排序时间。 - **多级排序**：允许用户根据多个列进行排序...
以下是使用`sortablejs`在Vue中实现`el-table`拖拽排序的详细步骤： 首先，确保已经安装了`sortablejs`库。可以通过npm来安装： ```bash npm install sortablejs --save ``` 接下来，在Vue组件中引入`sortablejs`...
对于表格数据，我们通常需要根据列中的字符串或数字进行升序或降序排列。 例如，如果我们要根据数值列进行排序，比较函数可能如下： ```javascript function compareValues(a, b) { return a - b; } ``` 对于...
标题中的"根据表格中的某一列进行排序的javascript代码"指的是在网页中，使用JavaScript实现对HTML表格中的数据按某一列进行升序或降序排列的功能。这个功能在数据分析、展示或者用户交互中非常常见，可以提供更加...
它通过对表格中的每一行数据进行比较，根据指定的列和排序方式重新排列这些数据。插件通常会自动处理各种数据类型，如数字、日期和字符串，确保排序的准确性。 在使用jQuery Table Sort插件时，我们需要首先引入...
JavaScript表格排序是一个在网页开发中常见的需求，尤其是在处理大量数据时。这个功能强大的JavaScript库，被称为"sorttable"，能够帮助开发者轻松实现表格数据的排序，同时提供了自定义排序规则的能力，大大增强了...