JavaScript指定列数和行数生成表格的例子

发布时间：2018-08-13 14:49 所属栏目：121 来源：站长网

导读：还记得今年元旦放假的时候，烈火网发布的jQuery插件表格代码吗？那是模拟word2007的一款效果，受到大家的喜爱，但是也有的童鞋给小编发QQ消息咨询，有没有非jquery版本的，现在我们就来介绍一款JS版本的、根据列数和行数生成表格的代码。有点不足的是，这

　　还记得今年元旦放假的时候，烈火网发布的jQuery插件表格代码吗？那是模拟word2007的一款效果，受到大家的喜爱，但是也有的童鞋给小编发QQ消息咨询，有没有非jquery版本的，现在我们就来介绍一款JS版本的、根据列数和行数生成表格的代码。有点不足的是，这款代码兼容性不太好。

　　演示：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title><b>Java</b>Script指定列数和行数生成表格的例子</title> <style type="text/css"> *{margin:0;padding:0;} li{list-style:none} table{ border-collapse:collapse;width:100%;border:#ccc 1px solid;} #wraper{width:900px;margin:10px auto;} #wraper table{clear:both;border:#ccc 1px solid;} #wraper table td{border:#ccc 1px solid;padding:2px;font-size:12px;} #wraper table th{background:#eee;color:#000;} #wraper p {height:40px;} #wraper p label{font-size:12px;margin:0 5px;} #wraper p .intxt{border:#ccc 1px solid;padding:2px;width:50px} </style> <script type="text/javascript"> window.onload = function(){ var rows = document.getElementById('row').value; var cols = document.getElementById('col').value; var box_table = document.getElementById("box_table"); var btn = document.getElementById('btn'); var tabletag = document.createElement("table"); var oTable = box_table.appendChild(tabletag); var oTr = document.createElement("tr"); var oTd = document.createElement("td"); var i = j = 0; var oNum = document.getElementById('num'); btn.onclick = function(){ for(i=0;i<rows;i++){ var oRows=oTable.insertRow(i)//FF //var oRows = oTable.appendChild(); for(j=0;j<cols;j++){ var oCols = oRows.insertCell(j)//FF oCols.innerHTML = parseInt(Math.ceil(Math.random()*15+1)); oCols.style.background="#eee" } } } } </script> </head> <body> <div id="wraper"> <p><label>输入行数:</label><input type="text" id="row" class="intxt" /><label>输入列数:</label><input type="text" class="intxt" id="col" /><input id="btn" type="button" value="生成表格" /></p> <div id="box_table"> </div> <p id="num"></p> </div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：ASP站长网）