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

发布时间：2018-08-13 16:23:42 所属栏目：编程来源：站长网

导读：还记得本年元旦放假的时辰，猛火网宣布的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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys