JavaScript基础7——动态生成表格

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>动态生成表格</title>
 6     </head>
 7     <body>
 8         行:<input type="text" id="row">
 9         列:<input type="text" id="col">
10         <br />
11         <input type="button" value="生成" onclick="createTable()" />
12         <br />
13         <div id="container"></div>
14     </body>
15     <script type="text/javascript">
16         function createTable() {
17             // 获取行和列
18             var row = document.getElementById("row").value;
19             var col = document.getElementById("col").value;
20             // 获取放置表格的容器
21             var container = document.getElementById("container");
22             // 生成表格
23             var tab = "<table border='1' width='100%'>";
24             for (var i = 1; i <= row; i++) {
25                 tab += "<tr align='center'>";
26                 for (var j = 1; j <= col; j++) {
27                     tab += "<td>" + j + "</td>";
28                 }
29                 tab += "</tr>";
30             }
31             tab += "</table>";
32             container.innerHTML = tab;
33         }
34     </script>
35 </html>

posted @ 2016-09-12 15:44  JiangCYkk  阅读(185)  评论(0编辑  收藏  举报