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/