【JS实现HTML表格排序功能】教程文章相关的互联网学习教程文章

JavaScript数值数组排序示例分享

但是,我们在使用中就会发现问题,这里的数组排序方法并不是按照我们想像中的数字大小来排序的,而是按照字符串测试结果改变原先的数据。这并不是我们想要的。 那么如何才可以得到我们想要的按照我们思维中的数字大小来排序呢。我们可以自己编写一个函数来实现。 代码如下:var values = [0, 1, 5, 10, 15];// asc升序函数function compareAsc(value1, value2) { if (value1 > value2) { return 1; } else if (value1 ...

jQuery表格排序组件-tablesorter使用示例【图】

一、引入文件 代码如下:<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <!-- 引入以下样式则表头出现排序图标,同时引入图片 --> <link href="css/style.css" rel="stylesheet" type="text/css" > 效果如图: 二、标准的HTML表格,必须包括thead和tbody标签 代码如下:<table id="myTable" class="tablesorter"> <thead> <tr> <th>Nam...

jquery 表格排序、实时搜索表格内容(附图)【图】

代码如下:<table class="table-sort"> <thead> <tr> <th class="table-sort">First Name</th> <th class="table-sort">Last Name</th> <th class="table-sort">Email</th> <th>Phone Number</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Smith</td> <td><a href="mailto:john.s">john.s</a></td> <td>(613) 873-2982</td> </tr> <tr> <td>Sean</td> <td>MacIsaac</td> <td><a href="mailto:seanjmacisaac">seanjmacisaac</...

用jquery.sortElements实现table排序

项目中要实现table排序的功能。 网上有很多解决方案,很多都基于jQuery。 jquery.tablesorter,大小17KB,不过他的首页在ie10下兼容性有点问题。 DataTables,大小75KB,功能强大,带分页,搜索等功能。 还有插件叫sortElements,很小巧,只有3KB,兼容性也不错,而且在Github上有818个星。 最后我选择用sortElements,实现很简单: 1. 引入jQuery 代码如下:<script type="text/javascript" src="jquery.js"></script> 2. 引入so...

jquery实现的鼠标拖动排序Li或Table

1、前端页面 代码如下:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!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 id="Head1"> <title>广告管理 </title> <link href="Styles/css.css" rel="stylesheet" type="tex...

javascript对JSON数据排序的3个例子

一、适用于数字排序和字幕排序 json 的排序方法有很多种,这是其中最简单的一种方法。代码如下: var sortBy = function (filed, rev, primer) { rev = (rev) ? -1 : 1; return function (a, b) { a = a[filed]; b = b[filed]; if (typeof (primer) != undefined) { a = primer(a); b = primer(b); } if (a < b) { return rev * -1; } if (a > b)...

Javascript排序算法之计数排序的实例

计数排序(Counting sort)是一种稳定的排序算法。计数排序使用一个额外的数组Count_arr,其中第i个元素是待排序数组Arr中值等于i的元素的个数。然后根据数组Count_arr来将Arr中的元素排到正确的位置。分为四个步骤:1.找出待排序的数组中最大和最小的元素2.统计数组中每个值为i的元素出现的次数,存入数组Count_arr的第i项3.对所有的计数累加(从Count_arr中的第一个元素开始,每一项和前一项相加)4.反向遍历原数组:将每个元素i放...

JavaScript排序算法之希尔排序的2个实例【图】

插入排序在对几乎已经排好序的数据操作时, 效率高, 即可以达到线性排序的效率。但插入排序一般来说是低效的, 因为插入排序每次只能将数据移动一位。希尔排序按其设计者希尔(Donald Shell)的名字命名,该算法由1959年公布。一些老版本教科书和参考手册把该算法命名为Shell-Metzner,即包含Marlene Metzner Norton的名字,但是根据Metzner本人的说法,“我没有为这种算法做任何事,我的名字不应该出现在算法的名字中。” 希尔排...

Javascript排序算法之合并排序(归并排序)的2个例子

归并排序(Merge sort)是建立在归并操作上的一种有效的排序算法。该算法是采用分治法(Divide and Conquer)的一个非常典型的应用。 归并(Merge)排序法是将两个(或两个以上)有序表合并成一个新的有序表,即把待排序序列分为若干个子序列,每个子序列是有序的。然后再把有序子序列合并为整体有序序列。 归并排序是建立在归并操作上的一种有效的排序算法。该算法是采用分治法(Divide and Conquer)的一个非常典型的应用。将已有...

js实现表格字段排序

1.比较函数生成器: 代码如下:/** * 比较函数生成器 * * @param iCol * 数据行数 * @param sDataType * 该行的数据类型 * @return */function generateCompareTRs(iCol, sDataType) { return function compareTRs(oTR1, oTR2) { vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType); vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType); ...

把字符串按照特定的字母顺序进行排序的js代码

例如,给一个特定的字母顺序,"a","o","e","u","y","i",请把'aiye','oeu','ayo','eoyiu','yuo','you','iao'这7个字符串按照给定的字母顺序排序。 我的思路是把那几个给定的6个字母分别等效成0-5的数字,然后把那7个字符串中的字母替换成0-5中的数字,再用sort方法进行排序,代码如下: 代码如下:var word = [aiye,oeu,ayo,eoyiu,yuo,you,iao]; var obj = {a:0,o:1,e:2,u:3,y:4,i:5}; var obj1 = {0:a,1:o,2:e,3:u,4:y,5:i}; for(...

Array 重排序方法和操作方法的简单实例

代码如下:<!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>重排序方法和操作方法</title> <script type="text/javascript"> //排序方法 function basicSort(){ var values=[0,10,2,3,12,5]; alert(values.reverse());//reverse()方法只是把数组的顺序反...

js中数组(Array)的排序(sort)注意事项说明

直接看代码吧,测试结果也贴在里面了 代码如下:var arrDemo = new Array(); arrDemo[0] = 10; arrDemo[1] = 50; arrDemo[2] = 51; arrDemo[3] = 100; arrDemo.sort(); //调用sort方法后,数组本身会被改变,即影响原数组 alert(arrDemo);//10,100,50,51 默认情况下sort方法是按ascii字母顺序排序的,而非我们认为是按数字大小排序 arrDemo.sort(function(a,b){return a>b?1:-1});//从小到大排序 alert(arrDemo);//10,50,51,10...

js sort 二维数组排序的用法小结

最近在搞js 排序的问题,因为数据库排序太耗资源,如果能转移到客户端去排序,能大大D减少服务器内存消耗。客户端的话,除了js,就是as了,可惜我as学得太烂,所以只能选择js来研究研究了。。。经过我的测试,js内置方法sort的效率非常高 我们知道在js中默认提供了sort函数,但是这个函数默认是按照数组内容的ascii码升序进行排列的,如果我们要对二维数组排序要如何做呢?在php中是有multi_sort函数可供调用的,但是在js中似乎没有...

jquery对元素拖动排序示例

完整代码:(aspx文件末尾有下载)代码如下: <!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>jquery学习-jquery对元素拖动排序</title> <style type="text/css"> #show { color: Red; } #list { cur...

功能 - 相关标签
JAVASCRIPT - 技术教程分类
JavaScript 教程 JavaScript 简介 JavaScript 用法 JavaScript Chrome 中运行 JavaScript 输出 JavaScript 语法 JavaScript 语句 JavaScript 注释 JavaScript 变量 JavaScript 数据类型 JavaScript 对象 JavaScript 函数 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 运算符 JavaScript 比较 JavaScript 条件语句 JavaScript switch 语句 JavaScript for 循环 JavaScript while 循环 JavaScript break 和 continue 语... JavaScript typeof JavaScript 类型转换 JavaScript 正则表达式 JavaScript 错误 JavaScript 调试 JavaScript 变量提升 JavaScript 严格模式 JavaScript 使用误区 JavaScript 表单 JavaScript 表单验证 JavaScript 验证 API JavaScript 保留关键字 JavaScript this JavaScript let 和 const JavaScript JSON JavaScript void JavaScript 异步编程 JavaScript Promise JavaScript 代码规范 JavaScript 函数定义 JavaScript 函数参数 JavaScript 函数调用 JavaScript 闭包 DOM 简介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素 HTMLCollection 对象 NodeList 对象 JavaScript 对象 JavaScript prototype JavaScript Number 对象 JavaScript String JavaScript Date(日期) JavaScript Array(数组) JavaScript Boolean(布尔) JavaScript Math(算数) JavaScript RegExp 对象 JavaScript Window JavaScript Window Location JavaScript Navigator JavaScript 弹窗 JavaScript 计时事件 JavaScript Cookie JavaScript 库 JavaScript 实例 JavaScript 对象实例 JavaScript 浏览器对象实例 JavaScript HTML DOM 实例 JavaScript 总结 JavaScript 对象 HTML DOM 对象 JavaScript 异步编程 javascript 全部