原生态 JavaScript 动态创建任意行数和列数的表格简单脚本 (简单Table ,object)...

前段时间用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); }
截图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值