`
zhouhailong
  • 浏览: 1488 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

一个js,

 
阅读更多
<html>
<body><div id="table"></div><div id="table1"></div></body>
</html>
<script>
var Table=function(id,header,data){
this.header=header;
this.data=data;
this.init=function(){
if(!header instanceof Array){alert("表格猎头错误");}
if(!data instanceof Array){alert("传入的数据错误");}
this.table=A("table");
this.table.border="1";
var hRow=A("tr");
for(var i=0;i<header.length;i++){
var td=A("td");
td.innerHTML=header[i];
hRow.appendChild(td);
}
this.table.appendChild(hRow);
data.reverse();
for(var i=data.length-1;i>=0;i--){
var row=A("tr");
for(var value in data[i]){
var td=A("td");
td.innerHTML=data[i][value];
row.appendChild(td);
}
this.table.appendChild(row);
}
$(id).innerHTML=this.table.outerHTML;
}
}
var TableSplit=function(id,header,data,num){
this.firstPage=1;
this.nowPage=1;
this.totalPage=data.length%num==0?data.length/num:parseInt(data.length/num)+1;
this.doInit=function(){
Table.call(this,id,header,data.slice((this.nowPage-1)*num,this.nowPage*num));
this.init();
$(id).innerHTML+="总共"+data.length+"条记录,"+this.totalPage+"页,每页"+num+"条,当前第"+this.nowPage+"页,";
this.splitOperater(this);
}
this.splitOperater=function(split){
var nextB=A("button");
nextB.value='下一页';nextB.onclick=function(){split.doOperate(split,"A");}
var upB=A("button");
upB.value='上一页';upB.onclick=function(){split.doOperate(split,"B");};
switch(split.nowPage){
case 1:$(id).appendChild(nextB);break;
case this.totalPage:$(id).appendChild(upB);break;
default:$(id).appendChild(upB);$(id).appendChild(nextB);
}
for(var i=0;i<split.totalPage;i++){
var font=A("font");font.color='red';font.style.cursor="hand";font.innerText=i+1;
font.onclick=function(){split.doOperate(split,this.innerText);}
$(id).appendChild(font);
}
}
if(!TableSplit.prototype.doOperate){
TableSplit.prototype.doOperate=function(){
switch(arguments[1]){
case 'A':arguments[0].nowPage++;arguments[0].doInit();break;
case 'B':arguments[0].nowPage--;arguments[0].doInit();break;
default:arguments[0].nowPage=parseInt(arguments[1]);arguments[0].doInit();
}
}
}
}
function A(type){return document.createElement(type);}
function $(id){return document.getElementById(id);}
var header=['姓名','年龄'];
var data=[];
for(var i=0;i<50;i++){
data.push({name:i,age:i});
}
var tableSplit=new TableSplit("table",header,data,10);
tableSplit.doInit();
var data1=[];
for(var i=0;i<54;i++){
data1.push({name:"aa"+i,age:"dd"+i});
}
var tableSplit1=new TableSplit("table1",header,data1,10);
tableSplit1.doInit();
</script>
分享到:
评论

相关推荐

    自己写的一个js包

    【标题】"自己写的一个js包" 描述了这是一个个人开发的JavaScript库或者组件集合,通常这类项目由开发者为了满足特定需求或实现某些功能而创建。JavaScript是一种广泛应用于Web开发的编程语言,它主要负责浏览器端的...

    仪表盘的一个js Demo

    【标题】:“仪表盘的一个js Demo”涉及到的知识点主要集中在JavaScript(js)编程语言和HTML网页设计上,尤其是如何在网页上实现动态的实时仪表盘显示。JavaScript是一种广泛用于网页和网络应用的脚本语言,它能为...

    Toastjs一个JavaScript原型吐司消息

    "Toastjs一个JavaScript原型吐司消息" 这个标题指的是一个名为Toast.js的JavaScript库,它主要用于实现"吐司"(Toast)消息功能。在UI设计中,吐司消息是一种轻量级的通知方式,通常用于显示短暂、非中断性的提示...

    一个JS类(收藏)

    《一个JS类(收藏)——深入理解Prototype.js与JavaScript原型机制》 在JavaScript的世界里,对象的继承和原型是至关重要的概念。Prototype.js是一个广泛使用的JavaScript库,它为JavaScript提供了许多面向对象编程...

    Eclipse的JavaScript插件 JSEditor

    JSEditor是Eclipse中的一个JavaScript开发插件,旨在提升JavaScript开发者的工作效率和代码质量。这个插件提供了丰富的功能,包括语法高亮、自动完成、错误检查和调试工具等。 1. **语法高亮**:JSEditor为...

    pinyin4js是一个汉字转拼音的Javascript开源库

    “pinyin4js是一个汉字转拼音的Javascript开源库”表明这是一个JavaScript库,它的主要功能是将汉字转换为对应的拼音表示。在网页应用或者JavaScript编程中,这样的库可以帮助开发者处理与汉字拼音相关的任务,比如...

    C#的一个JS类 (方便)

    C#的一个JS类C#的一个JS类C#的一个JS类C#的一个JS类C#的一个JS类C#的一个JS类C#的一个JS类

    原创的一个Js写的小游戏(俄罗斯方块),javascript小游戏

    主体就是用一个Table, 控制其每一个td的class来实现的。 地址:http://www.topnorth.cn/upload/rects.html 或者打开 http://www.topnorth.cn 进javascript栏目,javascript俄罗斯方块里可以看到。 看看吧,现丑...

    qrcode.js:用于生成二维码的一个JavaScript库

    qrcode.js是用于生成二维码的一个JavaScript库,只需引用这个,就能自己生成想要的二维码,里面可以添加文字、图片、网址等信息,也可以修改文字样式

    kinto.js, Kinto的脱机第一个JavaScript客户端.zip

    kinto.js, Kinto的脱机第一个JavaScript客户端 Kinto.js 离线的第1 层JavaScript客户端,用于 Kinto 。注意:如果你正在寻找Kinto的纯 HTTP js客户端,请查看 kinto-http.js 。想法是在默认情况下在浏览器中保持数据...

    一个非常好的js解析xml生成一个tree

    标题中的“一个非常好的js解析xml生成一个tree”指的是使用JavaScript编程语言将XML(可扩展标记语言)数据转换为树形结构。在Web开发中,XML常用于存储和传输结构化数据,而JavaScript作为客户端脚本语言,可用于...

    cpp-JSCjs是一个JavaScript引擎可以在浏览器的JavaScript引擎之上运行

    JSC.js是一个JavaScript引擎,可以在浏览器的JavaScript引擎之上运行。 它基于WebKit的默认JavaScript引擎。 因此,如果您使用Safari,您可以自己运行其JavaScript引擎。

    neurojs一个javascript深度学习和强化学习库

    neurojs 一个javascript深度学习和强化学习库

    js2c#-js转换c#代码

    在实际使用中,用户需要先编写或拥有一个JS文件,如"JS规范示例.js",然后使用这个工具将其转换为C#代码。转换后的代码可能需要根据C#的编程规范进行调整和优化,以满足C#项目的编码标准和性能需求。 对于"JS规范...

    Node.js Javascript运行环境(runtime environment)

    Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好...

    在js文件中引入(调用)另一个js文件的三种方法

    在JavaScript编程中,有时我们需要在一个JS文件中使用另一个JS文件中的功能或变量。这可以通过引入或调用外部JS文件来实现。以下详细介绍了三种在JS文件中引入另一个JS文件的方法。 **方法一:通过`&lt;script&gt;`标签...

    jsvu是一个JavaScript引擎版本更新程序

    jsvu是一个JavaScript(引擎)版本更新程序

    全国所有省份与城市javascript,js脚本

    总之,全国所有省份与城市javascript,js脚本是前端开发中实现动态选择地区功能的一个实例,它结合了数据结构、用户交互、DOM操作和性能优化等多个JavaScript核心概念。在实际应用中,开发者还需要关注安全性、可访问...

    delphi与JavaScript进行交互,获取JS端返回值

    2. **加载JavaScript上下文**:创建一个JavaScript执行环境,通常是一个浏览器窗口或框架,加载你想要交互的JavaScript代码。 3. **调用JavaScript函数**:使用提供的API调用JavaScript函数,传入必要的参数。这...

Global site tag (gtag.js) - Google Analytics