JavaScript实现表格排序方法

网络编程 2024/11/16 佚名

3 2 1

参考代码：
复制代码代码如下:
<!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=gb2312" />
<title>JavaScript控制网页内表格排序</title>
<style>
*{font-family:Arial, Helvetica, sans-serif;font-size:14px;border:none;}
body{text-align:center;}
table{margin:100px auto;}
td{width:100px;height:24px;text-align:center;line-height:24px;border:1px solid silver;}
.red{color:red;}
.top{background:#CCCCCC;cursor:pointer;}
.up{background:#FFFFCC url(up.gif) no-repeat right 5px;}
.down{background:#FFFFCC url(down.gif) no-repeat right 5px;}
.hov{background:#F0EFE5;}
</style>
</head>
<body>
<table cellpadding="0" id="table">
<tr class="top"><td>点击排序</td><td >点击排序</td><td>点击排序</td><td>点击排序</td></tr>
<tr>
   <td><span id="bfn_la_bac.usa">15.43</span></td>
   <td class="red">700</td>
   <td>1.220</td>
   <td class="red">www.corange.cn</td>
</tr>
    <tr><td><span id="bfn_la_c.usa">7.05</span></td>
<td class="red">4</td>
<td>3,000</td>
<td class="red">asp</td>
    </tr>
    <tr><td><span id="bfn_la_jpm.usa">30.62</span></td>
<td class="red">30</td>
<td>2,558,800</td>
<td class="red">php</td>
    </tr>
    <tr>
      <td><span id="bfn_la_axp.usa">22.30</span></td>
<td class="red">5</td><td>6</td>
<td class="red">js</td>
    </tr>
    <tr><td><span id="bfn_la_mrk.usa">26.31</span></td>
<td class="red">0.6</td><td>5</td>
<td class="red">网站开发</td>
    </tr>
    <tr><td><span id="bfn_la_pg.usa">63.16</span></td>
<td class="red">7</td><td>4</td>
<td class="red">子</td>
    </tr>
</table>
<script type="text/javascript">

var tableSort = function(){
this.initialize.apply(this,arguments);
}

tableSort.prototype = {

initialize : function(tableId,clickRow,startRow,endRow,classUp,classDown,selectClass){
   this.Table = document.getElementById(tableId);
   this.rows = this.Table.rows;//所有行
   this.Tags = this.rows[clickRow-1].cells;//标签td
   this.up = classUp;
   this.down = classDown;
   this.startRow = startRow;
   this.selectClass = selectClass;
   this.endRow = (endRow == 999? this.rows.length : endRow);
   this.T2Arr = this._td2Array();//所有受影响的td的二维数组
   this.setShow();
},
//设置标签切换
setShow:function(){
   var defaultClass = this.Tags[0].className;
   for(var Tag ,i=0;Tag = this.Tags[i];i++){
    Tag.index = i;
    addEventListener(Tag ,'click', Bind(Tag,statu));
   }
   var _this =this;
   var turn = 0;
   function statu(){
    for(var i=0;i<_this.Tags.length;i++){
     _this.Tags[i].className = defaultClass;
    }
    if(turn==0){
     addClass(this,_this.down)
     _this.startArray(0,this.index);
     turn=1;
    }else{
     addClass(this,_this.up)
     _this.startArray(1,this.index);
     turn=0;
    }
   }
},
//设置选中列样式
colClassSet:function(num,cla){
   //得到关联到的td
   for(var i= (this.startRow-1);i<(this.endRow);i++){
    for(var n=0;n<this.rows[i].cells.length;n++){
     removeClass(this.rows[i].cells[n],cla);
    }
    addClass(this.rows[i].cells[num],cla);
   }
},
//开始排序 num 根据第几列排序 aord 逆序还是顺序
startArray:function(aord,num){
   var afterSort = this.sortMethod(this.T2Arr,aord,num);//排序后的二维数组传到排序方法中去
   this.array2Td(num,afterSort);//输出
},
//将受影响的行和列转换成二维数组
_td2Array:function(){
   var arr=[];
   for(var i=(this.startRow-1),l=0;i<(this.endRow);i++,l++){
    arr[l]=[];
    for(var n=0;n<this.rows[i].cells.length;n++){
     arr[l].push(this.rows[i].cells[n].innerHTML);
    }
   }
   return arr;
},
//根据排序后的二维数组来输出相应的行和列的 innerHTML
array2Td:function(num,arr){
   this.colClassSet(num,this.selectClass);
   for(var i= (this.startRow-1),l=0;i<(this.endRow);i++,l++){
    for(var n=0;n<this.Tags.length;n++){
     this.rows[i].cells[n].innerHTML = arr[l][n];
    }
   }
},
//传进来一个二维数组，根据二维数组的子项中的w项排序，再返回排序后的二维数组
sortMethod:function(arr,aord,w){
   //var effectCol = this.getColByNum(whichCol);
   arr.sort(function(a,b){
    x = killHTML(a[w]);
    y = killHTML(b[w]);
    x = x.replace(/,/g,'');
    y = y.replace(/,/g,'');
    switch (isNaN(x)){
     case false:
     return Number(x) - Number(y);
     break;
     case true:
     return x.localeCompare(y);
     break;
    }
   });
   arr = aord==0?arr:arr.reverse();
   return arr;
}
}
/*-----------------------------------*/
function addEventListener(o,type,fn){
if(o.attachEvent){o.attachEvent('on'+type,fn)}
else if(o.addEventListener){o.addEventListener(type,fn,false)}
else{o['on'+type] = fn;}
}

function hasClass(element, className) {
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
return element.className.match(reg);
}

function addClass(element, className) {
if (!this.hasClass(element, className))
{
   element.className += " "+className;
}
}

function removeClass(element, className) {
if (hasClass(element, className)) {
   var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
   element.className = element.className.replace(reg,' ');
}
}

var Bind = function(object, fun) {
return function() {
   return fun.apply(object, arguments);
}
}
//去掉所有的html标记
function killHTML(str){
return str.replace(/<[^>]+>/g,"");
}
//------------------------------------------------
//tableid 第几行是标签行，从第几行开始排序，第几行结束排序(999表示最后) 升序标签样式，降序标签样式选中列样式
//注意标签行的class应该是一致的
var ex1 = new tableSort('table',1,2,999,'up','down','hov');
</script>


<br><br>
</body>
</html>

JavaScript,表格,排序

标签：

JavaScript,表格,排序

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

狼山资源网 Copyright www.pvsay.com

评论“JavaScript实现表格排序方法”

JavaScript实现表格排序方法

暂无“JavaScript实现表格排序方法”评论...

www.pvsay.com 狼山资源网

29,905影音资源

44,626技术资源

11,817软件资源

578,645站长资源

JavaScript实现表格排序方法

JavaScript,表格,排序

用js实现控件的隐藏及style.visibility的使用

json数据处理技巧(字段带空格、增加字段、排序等等)

评论“JavaScript实现表格排序方法”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

JavaScript实现表格排序方法

JavaScript,表格,排序

用js实现控件的隐藏及style.visibility的使用

json数据处理技巧(字段带空格、增加字段、排序等等)

评论“JavaScript实现表格排序方法”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存