html中table数据排序的js代码_javascript技巧

对了,注意那个innerText和innerHTML

复制代码 代码如下:

function sortCells(event) {
var obj = event.target;
var count = 0; count是记录点击次数的,根据奇偶进行升序或降序
if(!obj.getAttribute("clickCount")){
obj.setAttribute("clickCount", 0);
} else {
count = parseInt(obj.getAttribute("clickCount"));
count++;
obj.setAttribute("clickCount", count);
}
var table = event.target.parentNode.parentNode;
if(table.nodeName.localeCompare("THEAD") == 0){
if(table.parentNode.nodeName.localeCompare("TABLE") == 0){
table = table.parentNode;
} else {
return;
}
} else if(table.nodeName.localeCompare("TBODY") == 0){
if(table.parentNode.nodeName.localeCompare("TABLE") == 0){
table = table.parentNode;
} else {
return;
}
} else if(table.nodeName.localeCompare("TABLE") == 0){
} else {
return;
}
var colNum;
for(x = 0; x < table.rows(1).cells.length; x++){
if(event.target.innerText.localeCompare(table.rows(0).cells[x].innerText) == 0){
colNum = x;
break;
}
}
var column = table.rows(1).cells.length;
var row = table.rows.length;
var Ar = new Array(row - 1);
for (x = 0; x < row - 1; x++) {
Ar[x] = new Array(column);
}
for (x = 1; x < row; x++) {
for (y = 0; y < column; y++) {
Ar[x - 1][y] = table.rows(x).cells(y).innerHTML;
}
}
     //这个可以对字符串进行本地化排序
/* if((count%2) == 0){
Ar.sort(function(a, b) {
return b[colNum].localeCompare(a[colNum])
});
} else {
Ar.sort(function(a, b) {
return a[colNum].localeCompare(b[colNum])
});
} */
var temp;
for (x = 0; x < row - 1; x++) {
for (y = 1; y < row - 1; y++) {
temp = Ar[y - 1];
if((count % 2) == 0){
if (parseInt(Ar[y - 1][colNum]) >= parseInt(Ar[y][colNum])) {
Ar[y - 1] = Ar[y];
Ar[y] = temp;
}
} else {
if (parseInt(Ar[y - 1][colNum]) <= parseInt(Ar[y][colNum])) {
Ar[y - 1] = Ar[y];
Ar[y] = temp;
}
}
}
}
for (x = 1; x < row; x++) {
for (y = 0; y < column; y++) {
table.rows(x).cells(y).innerHTML = Ar[x - 1][y];
}
}
count++;
}

时间: 2024-12-26 09:10:28

html中table数据排序的js代码_javascript技巧的相关文章

关于网页中的无缝滚动的js代码_javascript技巧

随便打开一个网页,基本上都会看到无缝滚动或者轮播图,比如淘宝还有360官网的首页 观察这些轮播图可以发现图片可以来回循环地切换,那么是怎样做到的呢? 做到轮播图或者说无缝滚动主要有两种方式,一种是通过对图片的明暗即透明图的改变来显示或隐藏图片,另一种是通过运动框架,将图片显示在可视区域.这两种方式都会用到同一个东西,那就是定时器. JavaScript中的定时器有两种,1.setInterval();2.setTimeout();相对应的关闭定时器也有两种方法,clearInterval()和c

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

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

键盘上下键移动选择table表格行的js代码_javascript技巧

//这是要操作的表格: 这是第一行 这是第二行 这是第三行 这是第四行 //这是操作表格的代码 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

让任务管理器中的CPU跳舞的js代码_javascript技巧

之前在<编程之美>的书中看到有关控制任务管理器中CPU占用率的文章.感觉很意思.一直想自己做一次.但我在C语言方面的水平有限.因此不能直接用找到代码实践这个过程.不过最近经常在用javascript,所以就想到用javascript实现一下.结果还不错.代码在下面,只要在桌面上建一个html文件,把代码放进去,用浏览器打开就可以看了.因为我用的机器是双核的,所以效果不太好.希望有高手帮我改进一下这个程序. 复制代码 代码如下: <html> <head> <scr

js替换字符串中所有指定的字符(实现代码)_javascript技巧

第一次发现JavaScript中replace() 方法如果直接用str.replace("-","!") 只会替换第一个匹配的字符. 而str.replace(/\-/g,"!")则可以全部替换掉匹配的字符(g为全局标志). replace() The replace() method returns the string that results when you replace text matching its first argumen

防止登录页面出现在frame中js代码_javascript技巧

在使用frame页面嵌套开发的时候,遇到重启了服务器的时候会出现登录页面在frame页面中出现, 所以需要在登录页面里面用js判断下当前的地址信息,然后跳转到登录的单独页面中. js代码如下: $("document").ready(function(){ //防止在frame里面出现登录页面 if(top.location!==self.location){ //alert(top.location); //alert(self.location); top.location.hre

实现超用户体验 table排序javascript实现代码_javascript技巧

以前我在网上总会看类似这种的JS效果: 点击编辑时: (不好意思哈,图在文章最后面) 这种列表与编辑都在同一页的效果,确实很好,能够给用户带来意想不到的美好体验.可是它是怎么实现的呢? 其实实现这种效果有很多方法,当然如果你的JS不好,可以用JQuery的组件,但是我想要是自己能写出来总是好的.因此我抽了点时间来实现它.当我实现后,发现要实现这种效果是很简单的,几行JS代码就搞定了,关键就是一个思路问题,下面我会具体的写是怎么实现的. 总体思路:给<TR>一个ID,以显示与隐藏来实现这种效果.

一些有关检查数据的JS代码_javascript技巧

这些JS代码都是一些在表单提交时经常用到的代码,大部分代码也都是用正则表达式写的! //去左空格;  function ltrim(s){   return s.replace( /^\s*/, "");  }  //去右空格;  function rtrim(s){   return s.replace( /\s*$/, "");  }  //去左右空格;  function trim(s){   return rtrim(ltrim(s));  }  //是否为

JS封装的三级联动菜单(使用时只需要一行js代码)_javascript技巧

前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大家分享我在工作中封装并在项目中使用的三级级联操作代码,如有错误或者不当的地方欢迎大家指正. 使用简单(只需要一行代码) 可以根据需要设置是否显示"请选择"项 支持回调(在三级分类加载完成后触发回调事件) 支持一个页面多个级联菜单 演示效果预览: 三级联动封装 原理:将selec标签以及相关