你的位置:首页 > Java教程

[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/