js動態生成表格
阿新 • • 發佈：2018-08-21
htm round get test rem words contex .com cli 
下面用js實現可以生成用戶所需行數的表格。
1.首先在body中填入下列代碼，獲取用戶填入的行數值
1 <table> 2 <tr> 3 <td>動態生成表格</td> 4 <td><input id="Cold" type="text" class="input" size="10" name="Num"/>行</td> 5 </tr> 6 </table> 7 </br> 8 <input name="" type="button"value="生成" class="buttton" onclick="table()"/></br> 9 </br> 10 <div id="div1" style="display: none" mce_style="display: none"> 11 <div id="table1"></div> 12 </div> 13 <div id="errmsg1" class="formmsg"></div>
效果如下圖所示：
2.header中添加js代碼
1 <script> 2 function table() { 3 if (document.getElementById("Num").value == "" || document.getElementById("Num").value.search("^[0-9]*$") == -1) { 4 document.getElementById("errmsg1").style.display = "block";//判斷Num是否為空或不是數字 提示錯誤 5 document.getElementById("errmsg1").innerHTML = "提示信息：行數為空或不是數字！"; 6 } 7 else { 8 document.getElementById("errmsg1").style.display = "none";//隱藏提示信息 9 var Num = parseInt(document.getElementById("Num").value); //獲取行數 10 var flag = true; 11 var data = ""; 12 data += " <table >"; 13 data += " <tr>" + 14 "<td >we are</td>" + 15 "<td >zhuzhu</td>" + 16 "<td >dudu</td>" + 17 "</tr>" ; 18 for (var i = 1; i <= Num; i++) { 19 data += "<tr >"; 20 data += "<td>" + i + "</td>"; 21 data += "<td><input name=‘ColdDay"+i+"‘ type=‘text‘ class=‘input‘></td>"; 22 data += "<td><input name=‘ColdCureMethod"+i+"‘ type=‘text‘ class=‘input‘></td>"; 23 data += "</tr>"; 24 } 25 26 data += "</table>"; 27 document.getElementById("div1").style.display = "block"; 28 document.getElementById("table1").innerHTML = data; 29 } 30 } 31 </script>
生成效果如下：
3.所有代碼如下
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 12 <title>test</title> 13 14 <meta http-equiv="pragma" content="no-cache"> 15 <meta http-equiv="cache-control" content="no-cache"> 16 <meta http-equiv="expires" content="0"> 17 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 18 <meta http-equiv="description" content="This is my page"> 19 20 <style type="text/css"> 21 .right{ 22 margin:0% 10%; 23 width:600px; 24 } 25 .right table{ 26 background:white; 27 width:100%; 28 border:1px solid #499B33; 29 } 30 .right td{ 31 background:blue; 32 text-align:center; 33 padding:2px; 34 border:1px solid #499B33; 35 } 36 .right td{ 37 background:#8FBC8F; 38 } 39 .item{ 40 text-align:center; 41 width:100px; 42 } 43 .assigned{ 44 border:1px solid #BC2A4D; 45 } 46 </style> 47 <script> 48 function table() { 49 if (document.getElementById("Num").value == "" || document.getElementById("Num").value.search("^[0-9]*$") == -1) { 50 document.getElementById("errmsg1").style.display = "block";//判斷payNum是否為空或不是數字 提示錯誤 51 document.getElementById("errmsg1").innerHTML = "提示信息：行數為空或不是數字！"; 52 } 53 else { 54 document.getElementById("errmsg1").style.display = "none";//隱藏提示信息 55 var Num = parseInt(document.getElementById("Num").value); //獲取分期數 56 var flag = true; 57 var data = ""; 58 data += " <table >"; 59 data += " <tr>" + 60 "<td >we are</td>" + 61 "<td >zhuzhu</td>" + 62 "<td >dudu</td>" + 63 "</tr>" ; 64 for (var i = 1; i <= Num; i++) { 65 data += "<tr >"; 66 data += "<td>" + i + "</td>"; 67 data += "<td><input name=‘ColdDay"+i+"‘ type=‘text‘ class=‘input‘></td>"; 68 data += "<td><input name=‘ColdCureMethod"+i+"‘ type=‘text‘ class=‘input‘></td>"; 69 data += "</tr>"; 70 } 71 72 data += "</table>"; 73 document.getElementById("div1").style.display = "block"; 74 document.getElementById("table1").innerHTML = data; 75 } 76 } 77 </script> 78 79 </head> 80 81 <body> 82 <br> 83 <div style="width:750px;"> 84 <div class="right"> 85 <table> 86 <tr> 87 <td>動態生成表格</td> 88 <td><input id="Num" type="text" class="input" size="10" name="Num"/>行</td> 89 </tr> 90 </table> 91 </br> 92 <input name="" type="button" value="生成" class="buttton" onclick="table()"/></br> 93 </br> 94 <div id="div1" style="display: none" mce_style="display: none"> 95 <div id="table1"></div> 96 </div> 97 <div id="errmsg1" class="formmsg"></div> 98 </div> 99 </div> 100 </body> 101 </html>
js動態生成表格