本文介绍了一个使用原生JavaScript创建表格的方法。通过定义一个名为table的函数来生成具有指定行数和列数的表格结构，并将其插入到HTML文档中。此示例展示了如何使用document.createElement创建元素，以及如何构建基本的表格结构。
前段时间用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.onload=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); }截图：
扫一扫
845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
