表格排序+分页

刺骨的言语ヽ痛彻心扉 2022-08-24 04:22 269阅读 0赞

因为无聊封装了一个表格排序加分页的程序

结果写完后变的更无聊了........

tab.prototype.createtab=function()  
\{  
  var self=this  
  var tab = document.createElement("table")  
  tab.className="tab"  
  tab.border=0;tab.cellPadding=0;tab.cellSpacing=0;  
  var thead = document.createElement('thead');    
  var tr=document.createElement("tr")                              
  for(var i=0;i<this.head.length;i++)            
    \{  
       var td=document.createElement("td")  
    td.className="tdtitle";  
    td.οnmοuseοver=function()\{this.className="tdtitle1"\}         
    td.οnmοuseοut=function()\{this.className="tdtitle"\};  
    (function(i)\{td.οnclick=function()\{self.sorttab(i)\}\})(i)  
       td.style.width=this.width\[i\];td.innerHTML=this.head\[i\];tr.appendChild(td)  
    \}  
  thead.appendChild(tr);tab.appendChild(thead)                
  var tbody = document.createElement('tbody');                   
  for(var i=0;i<this.pagesize;i++)                                   
    \{  
    var tr=document.createElement("tr")  
    if((i+2)%2==0)                                            
    \{tr.className="tr2"                             
    tr.οnmοuseοver=function()\{this.className="tr3";\}      
    tr.οnmοuseοut=function()\{this.className="tr2"\}  
    \}  
    else  
    \{tr.className="tr1"  
     tr.οnmοuseοver=function()\{this.className="tr3"\}  
     tr.οnmοuseοut=function()\{this.className="tr1"\}  
    \}  
    for(var j=0;j<data\[i\].length;j++)                         
      \{  
         var td=document.createElement("td")  
   td.innerHTML=data\[i\]\[j\];td.className="tdbody";tr.appendChild(td)   
    \}  
  tbody.appendChild(tr)  
 \}  
  tab.appendChild(tbody)  
  document.getElementById(this.id).appendChild(tab)  
  var div = document.createElement("div")  
  div.className="div"  
  document.getElementById(this.id).appendChild(div)  
  var div1 = document.createElement("div")  
  div1.className="div1"  
  div1.οnclick=function()\{self.changepage(1)\}  
  div.appendChild(div1)  
   var div2 = document.createElement("div")  
  div2.className="div2"  
  div2.οnclick=function()\{self.changepage(--self.pageno)\}  
  div.appendChild(div2)  
  var div3 = document.createElement("div")  
   div3.className="div3"  
   div3.innerHTML=this.pageno  
  div.appendChild(div3)  
  var div4 = document.createElement("div")  
    div4.οnclick=function()\{self.changepage(++self.pageno)\}  
  div4.className="div4"  
  div.appendChild(div4)  
   var div5 = document.createElement("div")  
  div5.className="div5"  
    div5.οnclick=function()\{self.changepage(self.pagecount)\}  
  div.appendChild(div5)  
  var div6 = document.createElement("div")  
  div6.className="div6"  
  div6.innerHTML="当前第 1 页　总 "+this.pagecount+" 页　每页显示 "+this.pagesize+" 条"  
  div.appendChild(div6)  
   
\}

tab.prototype.sorttab=function(num)\{  
var tr0=document.getElementById(this.id).getElementsByTagName("tr")\[0\].getElementsByTagName("td")  
var self=this  
if(document.getElementById(this.id).sortCol==num)  
\{  
 this.data.reverse();  
    var str=tr0\[num\].innerHTML.charAt(tr0\[num\].innerHTML.length-1)  
    str=(str =="↑"?"↓":"↑")  
    tr0\[num\].innerHTML=this.head\[num\]+str  
 self.updata();self.changepage(this.pageno)  
\}  
else  
\{ for(var i=0;i<tr0.length;i++)  
  \{tr0\[i\].innerHTML=this.head\[i\]\}  
   tr0\[num\].innerHTML=this.head\[num\]+"↑"  
   this.data.sort(self.gcompare(num));self.updata();self.changepage(this.pageno)  
\}  
document.getElementById(this.id).sortCol=num  
\}

tab.prototype.gcompare=function(num)\{  
 return function(can1,can2)\{  
 if(can1\[num\]>can2\[num\])  
 \{return 1\}  
 else if(can1\[num\]<can2\[num\])  
 \{return -1\}  
 else  
 \{return 0\}\}  
\}

tab.prototype.updata=function()\{  
  var tab = document.getElementById(this.id)  
  var tbody =tab.getElementsByTagName("tbody")\[0\]  
  for(var i=0; i<tbody.getElementsByTagName("tr").length;i++)  
  \{  
  for(var j=0; j<tbody.getElementsByTagName("tr")\[i\].getElementsByTagName("td").length;j++)  
  \{tbody.getElementsByTagName("tr")\[i\].getElementsByTagName("td")\[j\].innerHTML=this.data\[i\]\[j\]\}  
  \}  
\}

tab.prototype.changepage=function(num)\{  
this.pageno = num  
if(this.pageno==0)\{this.pageno=1;return\}  
if(this.pageno==(this.pagecount+1))\{this.pageno=this.pagecount;return\}  
var zz =new Array()  
for(var i=(num-1)\*this.pagesize;i<((num-1)\*this.pagesize+this.pagesize);i++)  
\{  if(data\[i\]==null) break;zz.push(this.data\[i\])\}  
for(var i=0;i<this.pagesize;i++)  
 \{  if(zz\[i\]==null)  
    \{ for(var j=0;j<data\[j\].length;j++)  
   \{ document.getElementById(this.id).getElementsByTagName("tr")\[(i+1)\].getElementsByTagName("td")\[j\].innerHTML="&nbsp";\}  
     continue;  
  \}  
 for(var j=0;j<data\[j\].length;j++)  
 \{ document.getElementById(this.id).getElementsByTagName("tr")\[(i+1)\].getElementsByTagName("td")\[j\].innerHTML=zz\[i\]\[j\];\}  
 \}  
 var div =document.getElementById(this.id).getElementsByTagName("div")\[0\].getElementsByTagName("div")\[5\]  
 div.innerHTML="当前第 "+this.pageno+" 页　总 "+this.pagecount+" 页　每页显示 "+this.pagesize+" 条"  
 document.getElementById(this.id).getElementsByTagName("div")\[0\].getElementsByTagName("div")\[2\].innerHTML=this.pageno  
\}  
var head=\["编号","姓名","性别","年龄","出生日期","备注"\]  
var width=\[60,100,60,60,120,200\]  
var data=\[\[1,"啊一","男","24","1984-05-27","我很懒,什么都没留下"\],\[2,"啊二","男","26","1982-04-27","我很懒,什么都没留下"\],\[3,"脏三","男","27","1981-05-27","我很懒,什么都没留下"\],\[4,"你四","女","23","1985-05-17","我很懒,什么都没留下"\],\[5,"王老无","男","23","1985-05-27","我很懒,什么都没留下"\],\[6,"找六","女","25","1985-09-27","我很懒,什么都没留下"\],\[7,"高起","男","13","1995-05-27","我很懒,什么都没留下"\],\[8,"刘八","女","23","1985-05-27","我很懒,什么都没留下"\],\[9,"啊一","男","24","1984-05-27","我很懒,什么都没留下"\],\[10,"啊二","男","26","1982-04-27","我很懒,什么都没留下"\],\[11,"脏三","男","27","1981-05-27","我很懒,什么都没留下"\],\[12,"你四","女","23","1985-05-17","我很懒,什么都没留下"\],\[13,"王老无","男","23","1985-05-27","我很懒,什么都没留下"\],\[14,"找六","女","25","1985-09-27","我很懒,什么都没留下"\],\[15,"高起","男","13","1995-05-27","我很懒,什么都没留下"\],\[16,"刘八","女","23","1985-05-27","我很懒,什么都没留下"\]\]  
var oo=new tab("ab",head,width,data,5)  
oo.createtab()  
var cc=new tab("aab",head,width,data,8)  
cc.createtab()  
</script>

[http_album.hi.csdn.net_app_uploads_wtcsy_20081124_101657477.p.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081124/101657477.p.gif
[http_album.hi.csdn.net_app_uploads_wtcsy_20081126_000054336.p.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif
[http_album.hi.csdn.net_app_uploads_wtcsy_20081129_153908389.p.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081129/153908389.p.gif
[http_album.hi.csdn.net_app_uploads_wtcsy_20081130_121336889.p.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081130/121336889.p.gif
[http_album.hi.csdn.net_app_uploads_wtcsy_20081130_121650967.p.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081130/121650967.p.gif
[http_album.hi.csdn.net_app_uploads_wtcsy_20081130_121849452.p.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081130/121849452.p.gif
[http_album.hi.csdn.net_app_uploads_wtcsy_20081130_121501702.p.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081130/121501702.p.gif