JavaScript排序表格排序

1.你真的理解JavaScript中的Sort方法吗？2.你知道JavaScript中localeCompare方法的函数体吗？3.表格排序方法的参数是什么？JavaScript中的sort方法直接提供排序功能，我们不需要编写循环来逐一判断。但机制还是一样，复制代码如下： window . onload=function(){ var myar=new array(' red '，' green '，' gray ')；myrr . sort()；alert(MyArr . ToString())；}输出结果为灰色、绿色、红色红色；如果是整数呢？复制的代码如下： window . onload=function(){ var myar=new array(2，25，7)；myrr . sort()；alert(MyArr . ToString())；}如果你认为是2、7、25；所以我很高兴地说你错了。它的结果是2，25，7。为什么呢？因为排序方式是用字符串的ASCII码来判断的，所以任何非字符串都会先转换成字符串，导致了上面的情况。如何对整数进行排序？白，很简单，但是如果有Float，Date等呢？都一样，就写一个转换函数。说出来做出来。复制代码如下：函数convert(数据值，数据类型){switch(数据类型){case' int' :返回parseint(数据值)；case 'float':返回parseFloat(DataValue)；案例“日期”:返回新日期(Date . parse(DataValue))；default:返回DataValue . ToString()；}}一个非常简单的转换方法出来了。请注意日期。因为是对象，所以不同于基本类型，每次都会生成一个新的对象。Sort方法的参数可以是sortfunction。看一个简单的排序方法，复制代码如下：函数compare _ function (value1，value 2){ if(value 1 value 2)return-1；else if(value1value2)返回1；否则返回0；}实际上，localeCompare函数与它类似。当value1小于value2时，返回-1，即顺序排列；当value1value2时，返回1，即时间排列颠倒。回到正题，要对表进行排序，点击表头进行排序，所以必须有一个方法，叫做SortTable。那么，要对表中的一列进行排序，应该有哪些参数呢？首先，我们需要一个表ID来确定哪个表，然后我们需要确定要对哪个列进行排序。最后，每一列中的数据不一定是字符串，所以我们需要一个数据类型的参数，即SortTable(TableID、Col、data type)。复制代码如下： vard table=document . getelementbyid(table id)；var DBody=dtable . tbodies[0]；var DataRows=DBody.rowsvar MyArr=新数组；//将所有行放入(var I=0；iDataRows.lengthI){ MyArr[I]=DataRows[I]；} MyArr.sort(CustomCompare(Col，DataType))；//创建一个文档片段，并添加其中的所有行，相当于一个临时存储架。目的是(如果直接添加到document.body，一行插入刷新一次，数据多了会影响用户体验)//先把所有的行放在暂存架里，然后把暂存架里的行一起添加到document.body，这样表格只刷新一次。//就像你去商店购物，一定要先把想买的物品(行)都写在单子上(文档片段)，然后超市会全部买下来，而不是什么都不想就去一次，然后varfrag=document . createdocumentfragment()；for(var I=0；iMyArr.lengthI){ frag . appendchild(MyArr[I])；//将数组中的所有行添加到文档片段} dbody . appendchild(frag)；//将文档片段中的所有行添加到正文中，以便完成排序。然后是CustomCompare函数，它是一个用户定义的排序方法，作为排序方法的参数。它有两个参数，一个是排序列，另一个是数据类型。函数体为重复代码，代码如下：返回函数比较TRS (tr1，tr2) {var value1，value2value 1=convert(TR1 . cells[Col]. first child . node value，DataType)；value 2=convert(TR2 . cells[Col]. first child . node value，DataType)；if(value1 value2)返回-1；否则if(value1 value2)返回1；否则返回0；};当然，这种形式可以通过闭包来编写。

在排序方法中遍历数组中的每一项(每一项存储表的每一行)，将参数传递给比较器(TR1，TR2)，然后返回结果。其实还可以，但是如果你想对图片进行排序呢？是什么类型的图片？我不知道。让我们利用它，使用图片的标题或alt属性。它们可以一直是字符串。给它们一个自定义属性customvalue，然后按其值对它们进行排序。只有在实现的时候，才需要判断是否包含这个属性，所以要修改CompareTRs方法。复制代码如下：函数自定义比较(col，datatype){返回函数比较TRS (tr1，tr2) {var value1，value2//判断是否有customvalue属性if (tr1。单元格[列]。getattribute(' custom value '){ value 1=convert(tr1。单元格[列]。getattribute ('customvalue ')，数据类型)；value2=convert(TR2.cells[Col]。getAttribute('customvalue ')，DataType)；} else { value 1=convert(TR1 . cells[Col]. first child . node value，DataType)；value 2=convert(TR2 . cells[Col]. first child . node value，DataType)；} if(value1 value2)返回-1；否则if(value1 value2)返回1；否则返回0；};}图片的排序也解决了。如果用户想排序几次，排序多少次？我们需要修改CompareTRs方法吗？显然没有必要，JavaScript中有一个reverse()方法，可以反转数组中的每一项。要修改SortTable方法，只需复制如下代码：函数sorttable (tableid，col，datatype){ vard table=document . getelementbyid(tableid)；var DBody=dtable . tbodies[0]；var DataRows=DBody.rowsvar MyArr=新数组；for(var I=0；iDataRows.lengthI){ MyArr[I]=DataRows[I]；}//判断最后一个排序的列和这个是否是同一个列if(db body。currentcol==col) {myarr。反向()；//反转数组} else { myar . sort(custom compare(col，datatype))；}//创建一个文档片段，把所有的行都加进去，相当于一个临时的存放架。目的是(如果直接添加到document.body，一行插入刷新一次，数据多了会影响用户体验)//先把所有的行放在暂存架里，然后把暂存架里的行一起添加到document.body，这样表格只刷新一次。//就像你去商店购物，一定要先把想买的物品(行)都写在单子上(文档片段)，然后超市会全部买下来，而不是什么都不想就去一次，然后varfrag=document . createdocumentfragment()；for(var I=0；iMyArr.lengthI){ frag . appendchild(MyArr[I])；//将数组中的所有行添加到文档片段} dbody . appendchild(frag)；//将文档片段中的所有行添加到body中。CurrentCol=Col//记录当前排序的列}注意JavaScript中的大写，容易出错。以上代码测试成功，排序日期的效果如图所示。

所有代码：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题表格排序/title脚本类型=' text/JavaScript ' var ISasc=true；函数SortTable(TableID，Col，DataType){ var img sort=document。getelementbyid(' Col ' Col)；//判断是逆序还是顺序if(ISasc==true){ IMGsort。src=' img/arrow _ small _ down。png '；} else { img sort。src=' img/arrow _ small _ up。png '；} IsAsc=！IsAscvar DTable文档。getelementbyid(TableID)；var DBody=dtable。t bodies[0]；var DataRows=Dbody . rowsvar Myarr=新数组；for(var I=0；idatarows . lengthi){ my arr[I]=datarow[I]；} //判断上次排序的列和这次是否为同一列if(DBody .当前Col==Col){ MyArr。反向()；//将数组倒置} else { MyArr。排序(自定义比较(列，数据类型))；} //创建一个文档碎片，将所有的行都添加进去，相当于一个暂存架，目的是（如果直接加到文档。正文里面，会插入一行，就刷新一次，如果数据多了就会影响用户体验) //先将行全部放在暂存架里面，然后将暂存架里面的行一起添加到文档。正文，这样表格只会刷新一次。

//就像你去商店购物，要先将要买的物品（行)全部写在单子上（文档碎片),然后超市全部购买，而不会想到一样东西就去一次，那么var frag=文档。createdocumentfragment()；for(var I=0；iMyArr.lengthI){ frag。append child(Myarr[I])；//将数组里的行全部添加到文档碎片中} dbbody。appendchild(frag)；//将文档碎片中的行全部添加到身体中DBody .CurrentCol=Col//记录下当前排序的列}函数自定义比较(列，数据类型){ 0返回函数比较ts(TR1，TR2){ var值1，value2//判断是不是有自定义值这个属性if(TR1.cells[Col].getAttribute('自定义值'){ value 1=convert(TR1。单元格[栏].getAttribute('customvalue ')，DataType)；value2=convert(TR2.cells[Col]).getAttribute('customvalue ')，DataType)；} else { value 1=convert(TR1。单元格[Col]。第一个孩子。节点值，DataType)；值2=转换(TR2。单元格[Col]。第一个孩子。节点值，DataType)；} if(值1值2)返回-1;否则if(值1值2)返回1;否则返回0;};}函数转换(数据值，数据类型){开关(数据类型){大小写' int ' :返回par sent(DataValue)；案例“浮动”:返回parseFloat(DataValue)；案例"日期":返回新日期(日期。解析(DataValue))；默认值：返回数据值。ToString()；} }/脚本/头体div id=' container '表边框=' 1 ' id=' MyTable '并且tr TD onclick=' SortTable '(' my table '，0，' string ')样式=' cursor :指针'图片排序img id=' col 0 ' src=' http : img/arrow _ small _ up。png '/TD TD onclick=' SortTable '(' MyTable '，1，' int ')style='光标：指针'整数排序img id=' col 1 ' src=' http : img/arrow _ small _ up。png '/TD TD onclick=' SortTable '(' MyTable '，2，' float ')style='光标：指针'浮点数排序img id=' col 2 ' src=' http : img/arrow _ small _ up。png '/TD TD onclick=' SortTable '(' MyTable '，3，' string ')style='光标：指针'字符串排序img id=' col 3 ' src=' http : img/arrow _ small _ up。png '/TD TD onclick=' SortTable '('我的表'，4，'日期')style='光标：指针'日期排序img id=' col 4 ' src=' http : img/arrow _ small _ up。png '/TD/tr/ad t正文tr TD自定义值=' doc ' img src=' http : img/word图标。gif '/TD td2/TD TD TD 5.4/TD tdzd/TD TD TD 2009-10-31 14:13/TD/tr TD tr TD自定义值=' zip ' img/TD TD TD TD 2004-5-31 14:13/TD/tr TD自定义值=' doc ' img src=' http : img/word icon。gif '/TD TD TD td34/TD TD TD TD 9.4/TD tdcv/TD TD TD TD TD 1009-10-31 14:33:13/TD/tr TD自定义值=' txt ' img src=' http 3