js实现表格字段排序_javascript技巧_脚本之家,js中文表格排序的修改方法

测试test.html: 复制代码 代码如下:< html xmlns = "" >< title > 表列排序 title >< script type = "text/javascript" src = "js/sortTable.js" > script >< body >< table border = "1" id = "tblSort" > < thead style = "color: red; bgcolor: blank" > < tr > < th onclick = " sortTable;" style = "cursor: pointer" > LastName th > < th onclick = " sortTable;" style = "cursor: pointer" > Number th > < th onclick = " sortTable;" style = "cursor: pointer" > Date th > tr > thead > < tbody > < tr > < td > A td > < td > 1 td > < td > 5/9/2008 td > tr > < tr > < td > B td > < td > 3 td > < td > 6/9/2008 td > tr > < tr > < td > D td > < td > 6 td > < td > 5/4/2008 td > tr > < tr > < td > E td > < td > -5 td > < td > 5/4/2007 td > tr > < tr > < td > H td > < td > 34 td > < td > 5/8/2008 td > tr > < tr > < td > C td > < td > 12 td > < td > 1/4/2018 td > tr > tbody > table > body > html >

C

var oFragment = document.createDocumentFragment();
for (var i=0; i < aTRs.length; i++)
{
oFragment.appendChild(aTRs[i]);
ChangeClsName(aTRs[i],i);
}
oTBody.appendChild(oFragment);
}

* @param iCol* 字段列id eg: 0 1 2 3 ...* @param sDataType* 该字段数据类型 int,float,date 缺省情况下当字符串处理*/function sortTable(sTableID, iCol, sDataType) { var oTable = document.getElementById; 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; } var oFragment = document.createDocumentFragment(); for ( var j = 0; j < aTRs.length; j++) { oFragment.appendChild; } oTBody.appendChild; oTable.sortCol = iCol;}将以上问代码封装到一个js文件中,在html页面中引用。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

}
else if(sDec=='asc')
{
if(sDataType=='int')
{
return vValue1 == vValue2 ? 0 :(vValue1 - vValue2 >0 ? 1 : -1);
}
else if(sDataType =='cn')
{
return chrComp(vValue1,vValue2);
}
else
{
if (vValue1 > vValue2) {
return 1;
} else if (vValue1 < vValue2) {
return -1;
} else {
return 0;
}
}
}
};
}

1.比较函数生成器:复制代码 代码如下:/*** 比较函数生成器* * @param iCol* 数据行数* @param sDataType* 该行的数据类型* @return*/function generateCompareTRs { return function compareTRs { vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType); vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType); if { return -1; } else if { return 1; } else { return 0; } };}2.处理比较字符类型:复制代码 代码如下:/*** 处理排序的字段类型* * @param sValue* 字段值 默认为字符类型即比较ASCII码* @param sDataType* 字段类型 对于date只支持格式为mm/dd/yyyy或mmmm dd,yyyy* @return*/function convert { switch { case "int" : return parseInt; case "float" : return parseFloat; case "date" : return new Date; default : return sValue.toString(); }}3.主函数:复制代码 代码如下:/*** 通过表头对表列进行排序* * @param sTableID* 要处理的表ID

复制代码 代码如下:

//排序函数产生器
function generateCompareTRs(iCol, sDataType,isinput,sDec)
{
return function compareTRs(oTR1, oTR2)
{
if(isinput == 1)
{
var vValue1 = convert(oTR1.getElementsByTagName("input")[iCol].value);
var vValue2 = convert(oTR2.getElementsByTagName("input")[iCol].value);
}
else
{
var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
}
if(sDec=='desc')
{
if(sDataType=='int')
{
return vValue1 == vValue2 ? 0 :(vValue1 - vValue2 <0 ? 1 : -1);
}
else if(sDataType =='cn')
{
if(chrComp(vValue1,vValue2)>0)
{
return -1;
}
else if(chrComp(vValue1,vValue2)<0)
{
return 1;
}
else
{
return 0;
}
}
else
{
if (vValue1 > vValue2) {
return -1;
} else if (vValue1 < vValue2) {
return 1;
} else {
return 0;
}
}

B

Copy to Clipboard图片 1引用的内容:[www.bkjia.com] //转换器,将列的字段类型转换为可以排序的类型:String,int,float
function convert(sValue, sDataType)
{
switch(sDataType)
{
case "int":
return parseInt(sValue);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
default:
return sValue.toString();
}
}

7/12/1990

/*排序方法(主函数)
sTableID 表格的id
iCol表示列索引
1,当不是input类型时,iCol表示的是tr的第几个td;
2,当是input类型时,则iCol表示在这个tr中的第几个input;
sDataType表示该cell的数据类型或者该input的value 的数据类型. 默认是string,也可以int, float. cn是中文
isinput表示排序的内容是不是input(1是, 0否)
sDec表示倒序还是顺序(desc, 默认顺序), 避免出现input值改变之后再排序时候出现直接倒序的情况。
*/
function sortTable(sTableID, iCol, sDataType, isinput, sDec)
{
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];
}

复制代码 代码如下: function SortTable(sTableID, iCol, sDataType){ this.oTable=document.getElementById(sTableID); this.oTBody=this.oTable.tBodies[0]; this.colDat...

//重置单元格的classname
function ChangeClsName(tr,num)
{
num = num%2?1:2;
num.toString();
for ( var i = 0 ; i < tr.childNodes.length; i ++ )
{
tr.childNodes[i].className = "row" + num
}
}

3

...

First Name

之前研究过一下表格排序。上网找了一些代码研究了一下。勉强做了一个用着。后面发现当动态给单元格加超链接,或者列中存在一些空白,就排序不了了。

Last Name

代码:

function bindSortTable(sTableID, iCol, sDataType){
var table=document.getElementById(sTableID),
ftr=table.tHead.rows[0],
tds=ftr.cells;
if(tds[iCol]){
tds[iCol].onclick=function(){
var sortTable=new SortTable(sTableID, iCol, sDataType);
sortTable.sort();
}
}
}
window.onload=function(){
bindSortTable("tblSort",0);
bindSortTable("tblSort",1);
bindSortTable("tblSort",2,"int");
bindSortTable("tblSort",3,"float");
bindSortTable("tblSort",4,"date");
}

代码: 仿一个网友的代码写的,不记得出自哪里了,改成可以支持中文排序,而且支持控件value的排序。 没办法,能力有限,只能。

A

// 汉字排序方法
function chrComp(a,b)
{
return a.localeCompare(b);
}

作者:Artwl
出处:

  • 共2页:
  • 上一页
  • 1
  • 2
  • 下一页

7/12/1998

aTRs.sort(generateCompareTRs(iCol, sDataType,isinput, sDec));

7/12/1995

R

5

27.1

Number

JSCode demo

30.1

function SortTable(sTableID, iCol, sDataType){
this.oTable=document.getElementById(sTableID);
this.oTBody=this.oTable.tBodies[0];
this.colDataRows=this.oTBody.rows;
this.aTRs=[];
this.iCol=iCol;
this.sDataType=sDataType;
}
SortTable.prototype={
convert:function(sValue, sDataType){
switch(sDataType){
case "int":
return parseInt(sValue);
case "float":
return parseFloat(sValue);
case "date":
return new Date(sValue);
default:
return sValue.toString();
}
},
generateCompareTRs:function(iCol, sDataType, that){
return function compareTRs(oTR1,oTR2){
var vValue1= that.convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType),
vValue2= that.convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
if(vValue1 < vValue2){
return -1;
} else if(vValue1 > vValue2){
return 1;
} else{
return 0;
}
};
},
sort:function(){
for(var i=0,l=this.colDataRows.length;i<l;i++){
this.aTRs.push(this.colDataRows[i]);
}
if(this.oTable.sortCol === this.iCol){
this.aTRs.reverse();
} else {
this.aTRs.sort(this.generateCompareTRs(this.iCol, this.sDataType, this));
}
var oFragment=document.createDocumentFragment();
for(var i=0,l=this.aTRs.length;i<l;i++){
oFragment.appendChild(this.aTRs[i]);
}
this.oTBody.appendChild(oFragment);
this.oTable.sortCol = this.iCol;
}
}

D

4

Score

24.1

Q

2

P

复制代码 代码如下:

完整Demo:

O

调用示例

Birthday

排序代码

7/12/1999

20.1

本文由澳门威斯尼人平台登录发布于服务器&运维,转载请注明出处:js实现表格字段排序_javascript技巧_脚本之家,js中文表格排序的修改方法

相关阅读