星空网 > 软件开发 > Java

javascript如何生成指定行数的表格

javascript如何生成指定行数的表格:
使用javascript可以动态生成一个表格,但是有些时候需要根据需要生成指定行数的表格,下面就通过代码实例介绍一下如何实现此功能。代码如下:

 

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>动态生成表格代码</title> <style type="text/css">.right { margin:0% 10%; width:600px;}.right table { background:white; width:100%; border:1px solid #499B33;}.right td { background:blue; text-align:center; padding:2px; border:1px solid #499B33;}.right td { background:#8FBC8F;}.item { text-align:center; width:100px;}.assigned { border:1px solid #BC2A4D;}</style><script> function table() {  if(document.getElementById("Num").value == "" || document.getElementById("Num").value.search("^[0-9]*$") == -1)  {   document.getElementById("errmsg1").style.display = "block";//判断payNum是否为空或不是数字 提示错误   document.getElementById("errmsg1").innerHTML = "提示信息:行数为空或不是数字!";  }  else  {   document.getElementById("errmsg1").style.display = "none";//隐藏提示信息   var Num = parseInt(document.getElementById("Num").value); //获取分期数   var flag = true;   var data = "";   data += " <table >";   data += " <tr>" +   "<td >we are</td>" +   "<td >zhuzhu</td>" +   "<td >dudu</td>" +   "</tr>" ;   for (var i = 1; i <= Num; i++)     {    data += "<tr >";    data += "<td>" + i + "</td>";    data += "<td><input name='ColdDay"+i+"' type='text' class='input'></td>";    data += "<td><input name='ColdCureMethod"+i+"' type='text' class='input'></td>";    data += "</tr>";   }   data += "</table>";   document.getElementById("div1").style.display = "block";   document.getElementById("table1").innerHTML = data;  } } </script></head><body><div style="width:750px;"><div class="right"> <table>  <tr>  <td>动态生成表格</td>  <td><input id="Num" type="text" class="input" size="10" name="Num"/>行</td>  </tr> </table> </br> <input name="" type="button" value="生成" class="buttton" onclick="table()"/> </br> </br> <div id="div1" style="display: none" mce_style="display: none">  <div id="table1"></div> </div> <div id="errmsg1" class="formmsg"></div></div></div></body></html>

 

以上代码实现了我们的需求你,在文本框中填写要创建的行数,点击即可。下面简单介绍一下实现过程:
一.实现原理:
原理很简单,首先可以判断文本框输入的内容是否不为空且为数字,如果不是的话就会给出提示。然后代码给句输入的数字,使用for循环来创建指定的行数,最后将包含表格的字符串添加到指定的div中,这样就实现了我们的要求。
二.代码注释:
1.function table(){},创建一个函数用来创建表格。
2.if(document.getElementById("Num").value == "" || document.getElementById("Num").value.search("^[0-9]*$") == -1),用来判断文本框是否为空或者是否全是正整数。
3.document.getElementById("errmsg1").style.display = "block",将id为errmsg1的元素设置为显示。
4.document.getElementById("errmsg1").innerHTML = "提示信息:行数为空或不是数字!",给id为errmsg1的元素设置内容。
5.document.getElementById("errmsg1").style.display = "none",将id为errmsg1的元素设置为隐藏。
6.var Num = parseInt(document.getElementById("Num").value),获取要添加的行数。
7.后面的代码基本就是将表格结构以字符串形式存储于data变量中,然后再将此变量设置为table1的内容即可。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8160

更多内容可以参阅:http://www.softwhy.com/javascript/

 




原标题:javascript如何生成指定行数的表格

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

海瀚国际物流有限公司:https://www.goluckyvip.com/tag/100958.html
昂泰国际物流有限公司:https://www.goluckyvip.com/tag/100959.html
soundcloud:https://www.goluckyvip.com/tag/10096.html
鼎洋国际物流有限公司:https://www.goluckyvip.com/tag/100960.html
泛洋国际物流有限公司:https://www.goluckyvip.com/tag/100961.html
港泰国际物流有限公司:https://www.goluckyvip.com/tag/100962.html
深圳有没有比较好玩的景点 深圳有没有比较好玩的景点推荐一下:https://www.vstour.cn/a/366175.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流