接上面的那个var data= 在注释的那个地方............ 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","我很懒,什么都没留下"]]
帮忙测试一下 发现了bug帮忙说一下....
<style type="text/css">
.tab{border:#CCCCCC solid;border-width:1 0 0 1; clear:left}
.tdtitle{border:#CCCCCC solid;border-width:0 1 1 0; height:19px; vertical-align:middle; font-size:12px; padding-left:5px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081124/101657477.p.gif); color:#183C94; cursor: pointer}
.tdtitle1{border:#CCCCCC solid;border-width:0 1 1 0; height:19px; vertical-align:middle; font-size:12px; padding-left:5px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif); color:#183C94; cursor: pointer}
.tdbody{border:#CCCCCC solid;border-width:0 1 1 0; height:24px; vertical-align:middle; font-size:12px; padding-left:5px;}
.tr1{background-color:#FFFFFF}
.tr2{background-color:#f5f5f5}
.tr3{background-color:#d8ecff}
.div{height:24px !important;height:28px;width:634px !important; width:638px; background-image:URL(http://album.hi.csdn.net/app_uploads/wtcsy/20081129/153908389.p.gif); border:1px solid #9EC4D1; padding:2px 0 0 2px}
.div1{height:22px; width:18px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081130/121336889.p.gif); background-repeat:no-repeat; background-position:5px 5px; float:left; cursor: pointer }
.div2{height:22px; width:18px; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081130/121650967.p.gif); background-repeat:no-repeat; background-position:5px 5px; float:left; margin-left:2px;cursor: pointer}
.div3{height:22px; width:26px; margin-left:2px; line-height:22px; vertical-align:middle; float:left; font-size:13px; text-align:center}
.div4{height:22px; width:18px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081130/121849452.p.gif); background-repeat:no-repeat; background-position:5px 5px; float:left; margin-left:4px ;cursor: pointer}
.div5{height:22px; width:18px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081130/121501702.p.gif); background-repeat:no-repeat; background-position:5px 5px; float:left; margin-left:0px;cursor: pointer }
.div6{height:22px; width:auto;float:left; margin-left:16px ;line-height:22px; vertical-align:middle; font-size:12px }
</style>
<body><div id="ab"></div><br><br><div id="aab"></div></body>
<script>
function tab(id,head,width,data,pagesize){
this.id=id //容器的id
this.width=width; //控制表格宽度的数组
this.head =head; //菜单项
this.data=data; //数据原
this.pagesize=pagesize; //每页有多少条数据
this.pageno=1 //当前页
if(this.data.length%this.pagesize==0)
{this.pagecount=parseInt(this.data.length/this.pagesize)}
else
{this.pagecount=parseInt(this.data.length/this.pagesize)+1} //一共有多少页
}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.onmouseover=function(){this.className="tdtitle1"}
td.onmouseout=function(){this.className="tdtitle"};
(function(i){td.onclick=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.onmouseover=function(){this.className="tr3";}
tr.onmouseout=function(){this.className="tr2"}
}
else
{tr.className="tr1"
tr.onmouseover=function(){this.className="tr3"}
tr.onmouseout=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.onclick=function(){self.changepage(1)}
div.appendChild(div1)
var div2 = document.createElement("div")
div2.className="div2"
div2.onclick=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.onclick=function(){self.changepage(++self.pageno)}
div4.className="div4"
div.appendChild(div4)
var div5 = document.createElement("div")
div5.className="div5"
div5.onclick=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=" ";}
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=[] //这个地方接下面的数据 一个写不下
var oo=new tab("ab",head,width,data,5)
oo.createtab()
var cc=new tab("aab",head,width,data,8)
cc.createtab()
</script>
在注释的那个地方............
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","我很懒,什么都没留下"]]
当翻页、排序的时候用它到服务器取数据比较好