前段时间用Jquery框架,把原生态Javascript都忘得差不多了!最近不怎么忙,在重新熟悉一下!O(∩_∩)O哈哈~ (本人参加工作才一年多,写的不好还请见谅!)
HTML:
<!DOCTYPE HTML>
<HTML>
<head>
<title>table</title>
<script type="text/javascript" src="table.js"></script>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
table tr td{
border : 1px solid #ff0000;
width : 60px;
height : 20px;
}
</style>
</head>
<body>
<div id="wrapper">
</div>
<script type="text/javascript">
window.οnlοad=function(){
var monitorTable={
container : "wrapper",
name : "monitorTable",
id : "monitorEvent",
row : 4,
col : 6
};
table(monitorTable); //createTable
};
</script>
</body>
<HTML>
table.js
function table(table){
var _table={
con : table.container,
name : table.name,
id : table.id,
row : table.row,
col : table.col,
createElem : function(elem){
return document.createElement(elem);
},
getElemId : function(id){
return document.getElementById(id);
}
}
// console.log(_table.createElem("table"));
var Table=_table.createElem("table"),
thead=_table.createElem("thead"),
tbody=_table.createElem("tbody"),
tableParent=_table.con;
var trHead=_table.createElem("tr"); //thead
//tr.appendChild(thead);
for(var i=0;i<_table.col;i++){
var th=_table.createElem("th");
trHead.appendChild(th);
}
thead.appendChild(trHead);
for(var m=0;m<_table.row;m++){
var tr=_table.createElem("tr");
for(var n=0;n<_table.col;n++){
var td=_table.createElem("td");
tr.appendChild(td);
}
tbody.appendChild(tr);
}
Table.appendChild(thead);
Table.appendChild(tbody);
_table.getElemId("wrapper").appendChild(Table);
}
截图: