javascript动态创建指定行与列table表格代码实例
分享一段代码实例,它实现了动态创建指定数量行列table表格效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> table{ width:300px; height:100px; border:#0C9 1px solid; border-collapse:collapse; } #d1{ height:400px; width:300px; padding:10px; } </style> <script type="text/javascript"> function autocreate(){ var table=document.createElement("table"); table.setAttribute("border","1"); var line=document.getElementById("line").value; var list=document.getElementById("list").value; for(var index=0;index<line;index++){ var tr=document.createElement("tr"); for(var j=0;j<list;j++){ var td=document.createElement("td"); tr.appendChild(td); } table.appendChild(tr); } document.getElementById("d1").appendChild(table); } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ autocreate(); } } </script> </head> <body> <input type="text" id="line">行数 <input type="text" id="list">列数 <input type="button" id="bt" value="创建表格"> <div id="d1"></div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).function autocreate(){},此方法实现了动态创建行列表格效果。
(2).var table=document.createElement("table"),创建一个table表格元素对象。
(3).table.setAttribute("border","1"),设置边框为1px。
(4).var line=document.getElementById("line").value,获取行数。
(5).var list=document.getElementById("list").value,获取列数。
(6).for(var index=0;index<line;index++),通过for循环创建指定数目的行。
(7).var tr=document.createElement("tr"),创建tr行元素对象。
(8).for(var j=0;j<list;j++),通过for循环创建指定数目的td单元格。
(9).var td=document.createElement("td"),创建td单元格。
(10).tr.appendChild(td),将td添加到tr行。
(11).table.appendChild(tr),将tr行添加到table表格。
二.相关阅读:
(1).document.createElement()可以参阅document.createElement()一章节。
(2).setAttribute()可以参阅setAttribute()一章节。
(3).appendChild()可以参阅appendChild()一章节。
javascript动态创建指定行与列table表格代码实例,这样的场景在实际项目中还是用的比较多的,关于javascript动态创建指定行与列table表格代码实例就介绍到这了。
javascript动态创建指定行与列table表格代码实例属于前端实例代码,有关更多实例代码大家可以查看。