1.效果
2.html中代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格插件演示</title>
<script src="./js/Tableone.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
#table{
width:1024px;
margin:0 auto;
}
#pageRow a {
color:red;
margin:0 10px;
}
</style>
</head>
<body>
<div id ="table"></div>
<script type="text/javascript">
/*产生本地数据,替代数据库*/
var data = [
{name:"第一个",sex:"男",age:"18",qq:1204755158,tel:13895207056,address:"银川个市兴庆区新华街"},
{name:"第二个",sex:"女",age:"20",qq:1103275843,tel:13895207777,address:"吴忠市利通区明珠路"},
{name:"第三个",sex:"男",age:"14",qq:1204055188,tel:13895206666,address:"固原"},
{name:"第四个",sex:"女",age:"33",qq:1255447789,tel:13895205555,address:"中卫"},
{name:"第五个",sex:"男",age:"17",qq:1432232849,tel:13895204444,address:"石嘴山"},
{name:"第一个",sex:"男",age:"18",qq:1204055158,tel:13895207756,address:"银川个市兴庆区新华街"},
{name:"第二个",sex:"女",age:"20",qq:1103275843,tel:13895207777,address:"吴忠市利通区明珠路"},
{name:"第三个",sex:"男",age:"14",qq:1204055188,tel:13895206666,address:"固原"},
{name:"第四个",sex:"女",age:"33",qq:1255447789,tel:13895205555,address:"中卫"},
{name:"第五个",sex:"男",age:"17",qq:1432232849,tel:13895204444,address:"石嘴山"},
{name:"第一个",sex:"男",age:"18",qq:1204055158,tel:13895207756,address:"银川个市兴庆区新华街"},
{name:"第二个",sex:"女",age:"20",qq:1103275843,tel:13895207777,address:"吴忠市利通区明珠路"},
{name:"第三个",sex:"男",age:"14",qq:1204055188,tel:13895206666,address:"固原"},
{name:"第四个",sex:"女",age:"33",qq:1255447789,tel:13895205555,address:"中卫"},
{name:"第五个",sex:"男",age:"17",qq:1432232849,tel:13895204444,address:"石嘴山"},
{name:"第一个",sex:"男",age:"18",qq:1204055158,tel:13895207756,address:"银川个市兴庆区新华街"},
{name:"第二个",sex:"女",age:"20",qq:1103275843,tel:13895207777,address:"吴忠市利通区明珠路"},
{name:"第三个",sex:"男",age:"14",qq:1204055188,tel:13895206666,address:"固原"},
{name:"第四个",sex:"女",age:"33",qq:1255447789,tel:13895205555,address:"中卫"},
{name:"第五个",sex:"男",age:"17",qq:1432232849,tel:13895204444,address:"石嘴山"}
];
/*利用js对象创建表格*/
new Tableone({
tableId : "table",
theader : ["姓名","性别","年龄","QQ","Tel","地址"],
style : true,
page : true,
childPage : true,
childPageName : "../css3Signin/index.html" ,
pagenum :3,
data : data
})
</script>
</html>
3.js中的代码
!function(global,factory){
global.Tableone = factory(); //标准模式
}(this,function(){
return function(json){
/*定义变量,利用json参数引用html定义的值*/
tableId = json.tableId,
theader = json.theader,
style = json.style,
page = json.page,
onePageNum = json.pagenum,
childPage = json.childPage,
childPageName = json.childPageName,
data = json.data;
/*获取table父标签对象*/
jsonNode = document.getElementById(tableId);
/*创建table标签*//*table-layout:fixed;*/
table = document.createElement("table");
table.className = "lmTable";
table.id = "lmTable";
table.style = "table-layout:fixed;width:100%;text-align:center;border-collapse: collapse;";
jsonNode.appendChild(table);
/*创建表头的tr*/
headerTr = document.createElement("tr");
headerTr.className = "lmTable_header";
headerTr.style = "line-height:50px;border-bottom:3px solid #000;";
table.appendChild(headerTr);
/*创建表头的th并赋值*/
if(theader != null){
theader.forEach(function(content){
headerTh = document.createElement("th");
headerTh.innerText = content;
headerTr.appendChild(headerTh);
});
}
/*展示数据*/
data.forEach(function(row){
/*创建表内容的tr*/
contentTr = document.createElement("tr");
contentTr.className = "contentTr";
contentTr.style = "line-height:30px;border-bottom:1px solid #F2F2F2;";
table.appendChild(contentTr);
/*创建表头的td*/
Object.keys(row).forEach(function(key){
contentTd = document.createElement("td");
contentTd.innerText = row[key];
contentTr.appendChild(contentTd);
});
})
if(page == true){
pageRow = document.createElement("div");
pageRow.className = "pageRow";
pageRow.id = "pageRow";
pageRow.style = "text-align: right;";
jsonNode.appendChild(pageRow);
goPage(1,onePageNum);
}
/*设置隔行变色*/
if(style == true){
oneRowOneColor(tableId);
}
/*鼠标移入变色*/
moveMouse(tableId);
/*弹出子页面*/
if(childPage == true){
mouseClick(tableId);
}
};
})
/*设置隔行变色*/
function oneRowOneColor(tableId){
var div=document.getElementById(tableId);//依据id获取表格
var table = div.getElementsByTagName("table")[0];//获取表格的第一个tbody元素.getElementsByTagName() 方法可返回带有指定标签名的对象的集合
var trs=table.getElementsByTagName("tr");//获取tbody下所有的tr元素
for(i=1;i<trs.length;i++)//循环输出tr
{
if(i%2==0)//取模/取余
{
trs[i].style.backgroundColor="#F2F2F2";//改变符合条件的背景色
}
}
}
/*鼠标移入变色*/
function moveMouse(tableId){
var div=document.getElementById(tableId);
var table = div.getElementsByTagName("table")[0];
var trs=table.getElementsByTagName("tr");
var oldColor = '';
/*javascript的style属性只能获取内联样式,
* 对于外部样式和嵌入式样式需要用currentStyle属性。
* 但是,currentStyle在FIrefox和Chrome下不支持,
* 需要使用如下兼容性代码
*/
HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});
for(var i=1;i<trs.length;i++) {
//鼠标移入变色
trs[i].onmouseover = function(){
oldColor =this.currentStyle.backgroundColor;
this.style.background='#C0C0C0';
}
//鼠标移出恢复原来颜色
trs[i].onmouseout=function(){
this.style.background=oldColor;
}
}
}
/*弹出子页面*/
function mouseClick(tableId){
var div=document.getElementById(tableId);
var table = div.getElementsByTagName("table")[0];
var trs=table.getElementsByTagName("tr");
/*javascript的style属性只能获取内联样式,
* 对于外部样式和嵌入式样式需要用currentStyle属性。
* 但是,currentStyle在FIrefox和Chrome下不支持,
* 需要使用如下兼容性代码
*/
HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});
for(var i=1;i<trs.length;i++) {
trs[i].onclick = function(){
window.open(childPageName, 'new', 'top=100,left=400,width=500,height=400');
return false;
}
}
}
/**
* 分页函数
* pno--页数
* psize--每页显示记录数
* 分页部分是从真实数据行开始,因而存在加减某个常数,以确定真正的记录数
* 纯js分页实质是数据行全部加载,通过是否显示属性完成分页功能
**/
function goPage(pno,psize){
var itable = document.getElementById("lmTable");
var num = itable.rows.length-1;//表格所有行数(所有记录数)
var totalPage = 0;//总页数
var pageSize = psize;//每页显示行数
//总共分几页
if(num/pageSize > parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
var currentPage = pno;//当前页数
var startRow = (currentPage - 1) * pageSize+1;//开始显示的行 31
var endRow = currentPage * pageSize;//结束显示的行 40
endRow = (endRow > num)? num : endRow; 40
console.log(endRow);
//遍历显示数据实现分页
for(var i=1;i<(num+1);i++){
var irow = itable.rows[i];
if(i>=startRow && i<=endRow){
irow.style.display = "table-row";
}else{
irow.style.display = "none";
}
}
var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
if(currentPage>1){
tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
}else{
tempStr += "首页";
tempStr += "<上一页";
}
if(currentPage<totalPage){
tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";
tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
}else{
tempStr += "下一页>";
tempStr += "尾页";
}
document.getElementById("pageRow").innerHTML = tempStr;
}