表格客户端排序

最新推荐文章于 2024-07-24 16:20:17 发布

yangshenghong

最新推荐文章于 2024-07-24 16:20:17 发布

阅读量307

点赞数

文章标签： function javascript string border c table

来源: http://www.zyhowe.com/index/topicDetail.aspx?type=200100&topicid=288

<html>
<head>
<title>测试 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script type="text/javascript" language="javascript">

var TrArray=new Array();
function addSortTableClient(tableid,rowheadnum){
var tableobj = document.getElementById(tableid);
if(!tableobj) return;

//1.1 先补充colspan
for(var i=0;i <rowheadnum;i++){
var r=tableobj.rows[i];
for(var j=r.cells.length-1;j>=0;j--){
var c=r.cells[j];
if(c.colSpan>1){
for(k=1;k <=c.colSpan-1;k++){
var newtd=tableobj.rows[i].insertCell(j+1);
//newtd.innerHTML=i+"_"+j+"_"+(j+k);
newtd.style.display="none";
}
// c.colSpan=1;
}
}
}

//1.2 再补充rowspan
for(var i=rowheadnum-1;i>=0;i--){
var r=tableobj.rows[i];
for(var j=r.cells.length-1;j>=0;j--){
var c=r.cells[j];
if(c.rowSpan>1){
for(k=1;k <=c.rowSpan-1;k++){
var newtd=tableobj.rows[i+k].insertCell(j);
newtd.style.display="none";
}
//c.rowSpan=1;
}
}
}

//2.复制所有TBODY内所有TR到数组
for(var i=0;i <tableobj.rows.length-rowheadnum;i++){
TrArray[i]=tableobj.rows[i+rowheadnum];
}

//3.添加列头排序
for(var i=0;i <rowheadnum&&i <tableobj.rows.length;i++){
var r = tableobj.rows[i];
for(var j=0;j <r.cells.length;j++){
var c = r.cells[j];
var s = c.innerHTML;
if(c.type=="")c.type="Number";
c.innerHTML = " <a href='#' οnclick='javascript:sortTableClient(/""+tableid+"/",/""+rowheadnum+"/",/""+i+"/",/""+j+"/",/""+c.type+"/",/"asc/");'>"+s+" </a>";
}
}
}

var oldcolIndex=-1;
var oldrowIndex=-1;
function sortTableClient(tableid,rowheadnum,rowIndex,colIndex,typename,sortby){
var tableobj = document.getElementById(tableid);
if(!tableobj) return;
//alert(rowIndex+","+colIndex);
function CaseInsensitiveString(s){//转换为大写
return String(s).toUpperCase();
}
function parseDate(s){//转换为毫秒的时间
return Date.parse(s.replace(//-/g,"/"));
}
function parseNumber(s){
return parseFloat(s.replace(/,/,""));
}

var fTypeCast=String;//未指定的时候的方式
switch(typename){
case "Date"://时间的处理方式
fTypeCast=parseDate;
break;
case "CaseInsensitiveString"://大小写不区分
fTypeCast=CaseInsensitiveString;
break;
case "Number"://数字的处理方式
fTypeCast=parseNumber;
break;
default:
fTypeCast=String;
break;
}

TrArray.sort(
function (a,b){
if(fTypeCast(a.cells[colIndex].innerText) <fTypeCast(b.cells[colIndex].innerText))
return (sortby=="asc")?-1:1;
if(fTypeCast(a.cells[colIndex].innerText)>fTypeCast(b.cells[colIndex].innerText))
return (sortby=="asc")?1:-1;
return 0;
}
);

var c = tableobj.rows[rowIndex].cells[colIndex];
var s = c.innerHTML;

if(sortby=="desc"){
s=s.replace(/desc/gi,"asc");
if(s.indexOf("↑")>=0||s.indexOf("↓")>=0){
s=s.replace(/↓/gi,"↑");
}else{
s=s.replace(/ <//A>/gi,"↑ </a>");
}
}else if(sortby=="asc"){
s=s.replace(/asc/gi,"desc");
if(s.indexOf("↑")>=0||s.indexOf("↓")>=0){
s=s.replace(/↑/gi,"↓");
}else{
s=s.replace(/ <//A>/gi,"↓ </a>");
}
}

c.innerHTML =s;

if(rowIndex!=oldrowIndex||colIndex!=oldcolIndex){
if(oldcolIndex!=-1&&oldrowIndex!=-1){
var c1 = tableobj.rows[oldrowIndex].cells[oldcolIndex];
var s1 = c1.innerHTML;
s1=s1.replace(/( <img)[^ <]*/gi,"");
c1.innerHTML=s1;
}
oldrowIndex=rowIndex;
oldcolIndex=colIndex;
}

var k=0;
for(var i=rowheadnum;i <tableobj.rows.length;i++){
tableobj.rows[i].swapNode(TrArray[k++]);
}
}

</script>
<table id='SortTable' width=800 border=1>
<tr>
<td nowrap rowspan='2' colspan='1' type='Number' >时间 </td>
<td nowrap rowspan='1' colspan='2' type='Number' >固定资产投资额 </td>
<td nowrap rowspan='1' colspan='2' type='Number' >GDP </td>
</tr>
<tr>
<td nowrap rowspan='1' colspan='1' type='Number' >累计值(亿元) </td>
<td nowrap rowspan='1' colspan='1' type='Number' >累计增长(%) </td>
<td nowrap rowspan='1' colspan='1' type='Number' >累计值(亿元) </td>
<td nowrap rowspan='1' colspan='1' type='Number' >累计增长(%) </td>
</tr>
<tr>
<td nowrap>200812 </td>
<td align=right nowrap>148,167.00 </td>
<td align=right nowrap>26.10 </td>
<td align=right nowrap>300,670.00 </td>
<td align=right nowrap>9.00 </td>
</tr>
<tr>
<td nowrap>200809 </td>
<td align=right nowrap>99,870.71 </td>
<td align=right nowrap>27.60 </td>
<td align=right nowrap>201,631.00 </td>
<td align=right nowrap>9.90 </td>
</tr>
<tr >
<td nowrap>200806 </td>
<td align=right nowrap>58,435.98 </td>
<td align=right nowrap>26.80 </td>
<td align=right nowrap>130,619.00 </td>
<td align=right nowrap>10.40 </td>
</tr>
<tr >
<td nowrap>200803 </td>
<td align=right nowrap>18,316.94 </td>
<td align=right nowrap>25.90 </td>
<td align=right nowrap>61,491.00 </td>
<td align=right nowrap>10.60 </td>
</tr>
<tr >
<td nowrap>200712 </td>
<td align=right nowrap>117,413.91 </td>
<td align=right nowrap>25.80 </td>
<td align=right nowrap>246,619.00 </td>
<td align=right nowrap>11.40 </td>
</tr>
<tr >
<td nowrap>200709 </td>
<td align=right nowrap>78,246.78 </td>
<td align=right nowrap>26.40 </td>
<td align=right nowrap>166,043.00 </td>
<td align=right nowrap>11.50 </td>
</tr>
<tr >
<td nowrap>200706 </td>
<td align=right nowrap>46,077.82 </td>
<td align=right nowrap>26.70 </td>
<td align=right nowrap>106,768.00 </td>
<td align=right nowrap>11.50 </td>
</tr> <tr >
<td nowrap>200703 </td>
<td align=right nowrap>14,543.61 </td>
<td align=right nowrap>25.30 </td>
<td align=right nowrap>50,287.00 </td>
<td align=right nowrap>11.10 </td>
</tr> <tr >
<td nowrap>200612 </td>
<td align=right nowrap>93,472.36 </td>
<td align=right nowrap>24.50 </td>
<td align=right nowrap>210,871.00 </td>
<td align=right nowrap>11.10 </td>
</tr> <tr >
<td nowrap>200609 </td>
<td align=right nowrap>61,880.12 </td>
<td align=right nowrap>28.20 </td>
<td align=right nowrap>142,898.30 </td>
<td align=right nowrap>10.80 </td>
</tr> <tr >
<td nowrap>200606 </td>
<td align=right nowrap>36,368.35 </td>
<td align=right nowrap>31.30 </td>
<td align=right nowrap>92,369.40 </td>
<td align=right nowrap>11.00 </td>
</tr>
<tr >
<td nowrap>200603 </td>
<td align=right nowrap>11,608.40 </td>
<td align=right nowrap>29.80 </td>
<td align=right nowrap>43,851.00 </td>
<td align=right nowrap>10.40 </td>
</tr> <tr >
<td nowrap>200512 </td>
<td align=right nowrap>75,096.48 </td>
<td align=right nowrap>27.20 </td>
<td align=right nowrap>183,867.90 </td>
<td align=right nowrap>10.40 </td>
</tr> <tr >
<td nowrap>200509 </td>
<td align=right nowrap>48,741.49 </td>
<td align=right nowrap>27.72 </td>
<td align=right nowrap>125,984.90 </td>
<td align=right nowrap>10.40 </td>
</tr> <tr >
<td nowrap>200506 </td>
<td align=right nowrap>27,967.00 </td>
<td align=right nowrap>27.10 </td>
<td align=right nowrap>81,412.80 </td>
<td align=right nowrap>10.50 </td>
</tr> <tr >
<td nowrap>200503 </td>
<td align=right nowrap>9,036.68 </td>
<td align=right nowrap>25.30 </td>
<td align=right nowrap>38,848.60 </td>
<td align=right nowrap>10.50 </td>
</tr> <tr >
<td nowrap>200412 </td>
<td align=right nowrap>58,620.28 </td>
<td align=right nowrap>27.60 </td>
<td align=right nowrap>136,875.90 </td>
<td align=right nowrap>9.50 </td>
</tr> <tr >
<td nowrap>200409 </td>
<td align=right nowrap>38,028.34 </td>
<td align=right nowrap>29.90 </td>
<td align=right nowrap>93,495.20 </td>
<td align=right nowrap>9.50 </td>
</tr>
<tr >
<td nowrap>200406 </td>
<td align=right nowrap>21,843.97 </td>
<td align=right nowrap>31.00 </td>
<td align=right nowrap>59,042.70 </td>
<td align=right nowrap>9.70 </td>
</tr> <tr >
<td nowrap>200403 </td>
<td align=right nowrap>7,058.48 </td>
<td align=right nowrap>47.78 </td>
<td align=right nowrap>27,262.00 </td>
<td align=right nowrap>9.80 </td>
</tr>
</table>
<script language="javascript">
addSortTableClient("SortTable",2);
</script>
</body>
</html>

yangshenghong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格客户端排序

来源: http://www.zyhowe.com/index/topicDetail.aspx?type=200100&topicid=288 测试 var TrArray=new Array(); function addSortTableClient(tableid,rowheadnum){ var tableobj = document.getElementById
复制链接

扫一扫