您的位置 首页 欧美公司

js动态生成表格

js动态生成表格js动态生成表格下面用js实现可以生成用户所需行数的表格。1.首先在body中填入下列代码,获取用户填入的行数值1<table>2<tr&gt

js动态生成表格

js动态生成表格

下面用js实现可以生成用户所需行数的表格。

1.首先在body中填入下列代码,获取用户填入的行数值

复制代码

1 <table> 2 <tr> 3 <td>动态生成表格</td> 4 <td><input id=”Cold” type=”text” size=”10″ name=”Num”/>行</td> 5 </tr> 6 </table> 7 </br> 8 <input name=”” type=”button” value=”生成” onclick=”table()”/></br> 9 </br> 10 <div id=”div1″ mce_> 11 <div id=”table1″></div> 12 </div> 13 <div id=”errmsg1″ ></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 js动态生成表格 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 > 84 <div > 85 <table> 86 <tr> 87 <td>动态生成表格</td> 88 <td><input id=”Num” type=”text” size=”10″ name=”Num”/>行</td> 89 </tr> 90 </table> 91 </br> 92 <input name=”” type=”button” value=”生成” onclick=”table()”/></br> 93 </br> 94 <div id=”div1″ mce_> 95 <div id=”table1″></div> 96 </div> 97 <div id=”errmsg1″ ></div> 98 </div> 99 </div>100 </body>101 </html>

复制代码View Code

js动态生成表格

js动态生成表格

rmsg1″).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); //获取行数

js动态生成表格

js动态生成表格 js动态生成表格

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;

js动态生成表格

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); //获取

js动态生成表格 js动态生成表格

分期数 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>” +

js动态生成表格

js动态生成表格

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;

js动态生成表格【js动态生成表格】

js动态生成表格

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 > 84 <div > 85 <table> 86 <tr> 87 <td>动态生成表格</td> 88 <td><input id=”Num” type=”text” size=”10″ name=”Num”/>行</td> 89 </tr> 90 </table> 91 </br> 92 <input name=”” type=”button” value=”生成” onclick=”table()”/></br> 93 </br> 94 <div id=”div1″ mce_> 95 <div id=”table1″></div> 96 </div> 97 <div id=”errmsg1″ ></div> 98 </div> 99 </div>100 </body>101 </html>View Code

js动态生成表格

js动态生成表格

下面用js实现可以生成用户所需行数的表格。1.首先在body中填入下列代码,获取用户填入的行数值 1 <table> 2 <tr> 3 <td>动态生成表格</td> 4 <td><input id=”Cold” type=”text” size=”10″ name=”Num”/>行</td> 5 </tr> 6 </table> 7 </br> 8 <input name=”” type=”button” value=”生成” onclick=”table()”/></br> 9 </br> 10 <div id=”div1″ mce_> 11 <div id=”table1″></div> 12 </div> 13 <div id=”errmsg1″ ></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(“er

免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。

作者: 026xm

没有了

已是最早文章

为您推荐

苏宁易购联盟

苏宁易购联盟

苏宁易购联盟苏宁易购联盟9月26日,苏宁易购杯英雄联盟城市争霸赛总决赛冠军诞生!来自太原的DawN拿到本届赛事的总冠军,合肥AGD赢得亚军,石家庄OFG获得季军,

上海敢客网络科技有限公司

上海敢客网络科技有限公司

上海敢客网络科技有限公司上海敢客网络科技有限公司2月8日消息:昨日,2021年2月份国产网络游戏版号正式下发,共有84款游戏过审。其中包括了一款Switch游戏《月影之塔》,3款

莎啦啦鲜花网

莎啦啦鲜花网

莎啦啦鲜花网莎啦啦鲜花网莎啦啦首页截图新浪科技孟鸿北京报道昨天一早,黄川习惯性地输入莎啦啦网址。不是为订花或其他礼品,只是一种习惯。因为他是这家鲜花礼品速递网站的股东

跨境通购物

跨境通购物

跨境通购物跨境通购物跨境通页面截图(z607.com配图)【z607.com报道】12月30日消息,国内首家获得政府批准的跨境购物网站“上海自贸区跨境电子

米物智能鼠标垫

米物智能鼠标垫

米物智能鼠标垫米物智能鼠标垫6月28日,小米有品上架了一款米物智能鼠标垫,支持无线充电、同时提供RGB灯光效果,售价249元。上架仅10天,这款鼠标垫就宣布直降50元,目前售价

返回顶部