js文件
function Table(nodeElement){//构造函数
this.nodeElement = nodeElement || document.body;//有参数和无参数
this.percent = 100;
}
Table.prototype = {
createTable : function (json){//创建单元格
if (!json){//判断是否传入了参数，如果没有传入参数，报出错误
throw "您没有传入参数，请传入参数";
}else{
this.percent = 1 / json.col * 100;//计算单元格的宽度
this.cssCon();//给单元格设置样式
for(var i = 0; i < json.col;i++){//循环遍历
var rowEle = document.createElement("div");//创建单元格
rowEle.className="row";//添加类名
if(i % 2 == 0){//判断是不是偶数行
rowEle.className += " double";//如果是偶数行，添加另一种样式
}
this.nodeElement.appendChild(rowEle);//添加子节点
for(var j = 0; j <json.col;j++){//循环遍历行数
var colEle = document.createElement("div");//创建列
colEle.className = "col";//给列添加类名
rowEle.appendChild(colEle);//添加子节点
}
}
}
},
cssCon:function(){//样式方法
var css = document.getElementsByTagName("style")[0];//拿到style标签
if(!css){//判断是否有style标签
css = document.createElement("style");//如果没有style标签，则创建style标签
document.head.appendChild(css);//添加子节点
}
//设置css样式
css.innerText += '.row{100%;height:30px;background:#ecffff;border:1px solid #000;}.double{' +
'background:#a6ffff}.col{'+this.percent+'%;height:30px;float:left;border-right:2px solid #000;box-sizing:border-box}';
},
}
调用js框架
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;;
}
#win{
margin: 50px auto;
800px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="win"></div>
</body>
<script type="text/javascript" src="table.js"></script>
<script type="text/javascript">
var win = document.getElementById("win");//拿到div
var table = new Table(win);//创建table对象
table.createTable({//创建表格
col:10,//传入行数
row:15,//传入列数
});
</script>
</html>
