js动态生成表格

Z时代
2024-01-10
分类：综合

coding

<div id="cnblogs_post_body" class="blogpost-body">下面用js实现可以生成用户所需行数的表格。 1.首先在body中填入下列代码，获取用户填入的行数值 <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre> 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></pre> <div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> 效果如下图所示： <img src="https://images0.cnblogs.com/blog/500042/201307/11111759-5dc82fee4e1c4dc79f2841050fb692ee.png" alt=""> 2.header中添加js代码 <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre> 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> </pre> <div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> 生成效果如下： <img src="https://images0.cnblogs.com/blog/500042/201307/11111930-e191ceb0a3ed44e9bf92d40dbacd1466.png" alt=""> 3.所有代码如下 <div class="cnblogs_code" onclick="cnblogs_code_show('098135b3-1e95-49eb-96d7-428992ee8f3b')"><img id="code_img_closed_098135b3-1e95-49eb-96d7-428992ee8f3b" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt="" style="display: none;"><img id="code_img_opened_098135b3-1e95-49eb-96d7-428992ee8f3b" class="code_img_opened" style="" onclick="cnblogs_code_hide('098135b3-1e95-49eb-96d7-428992ee8f3b',event)" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt=""> <div id="cnblogs_code_open_098135b3-1e95-49eb-96d7-428992ee8f3b" class="cnblogs_code_hide" style="display: block;"><div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div> <pre> 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></pre> <div class="cnblogs_code_toolbar"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></div></div> View Code </div>    </div>

以上是 js动态生成表格的全部内容，来源链接： utcz.com/z/510010.html

js动态生成表格

其他人也看了：