js动态生成指定行数的表格

更新时间：2013年07月11日 17:28:18 作者：

下面用js实现可以生成用户所需行数的表格，具体步骤及效果图如下，感兴趣的朋友，可以参考下哈，希望对大家有所帮助

下面用js实现可以生成用户所需行数的表格。
1.首先在body中填入下列代码，获取用户填入的行数值

 
<table> 
<tr> 
<td>动态生成表格</td> 
<td><input id="Cold" 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> 

效果如下图所示：

2.header中添加js代码

复制代码代码如下:

 
<script> 
function table() { 
if (document.getElementById("Num").value == "" || document.getElementById("Num").value.search("^[0-9]*$") == -1) { 
document.getElementById("errmsg1").style.display = "block";//判断Num是否为空或不是数字 提示错误 
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> 

生成效果如下：

3.所有代码如下

复制代码代码如下:

 
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<base href="<%=basePath%>"> 
<title>test</title> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="This is my page"> 
<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> 
<br> 
<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> 

您可能感兴趣的文章:

JavaScript常用脚本汇总（二）
本文给大家分享的javascript常用脚本有把JavaScript中的伪数组转换为真数组、JavaScript设置主页功能、JavaScript收藏功能、javascript检测元素是否支持某个属性代码、创建和使用命名空间，有需要的小伙伴们快来看看吧。
2015-03-03
一文学会用JS判断文字是否被省略(ellipsis)
这篇文章主要给大家介绍了用JS如何判断文字被省略ellipsis,CSS帮我们搞定了省略,但是JS并不知道文本什么时候被省略了,所以我们得通过JS来计算,接下来,我将介绍2种方法来实现JS计算省略,需要的朋友可以参考下
2023-08-08
JavaScript实现的简单幂函数实例
这篇文章主要介绍了JavaScript实现的简单幂函数,实例分析了javascript实现幂运算的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-04-04
JavaScript实现滑动门效果
这篇文章主要为大家详细介绍了JavaScript实现滑动门效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
Bootstrap基础学习
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。它使用了流行的浏览器技术，给web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。
2015-06-06
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
这篇文章主要介绍了JS实现DOM节点插入操作之子节点与兄弟节点插入操作,涉及JavaScript节点的创建、添加简单操作技巧,需要的朋友可以参考下
2018-07-07
JS实现页面鼠标点击出现图片特效
这篇文章主要为大家详细介绍了JS实现页面鼠标点击出现图片特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
JavaScript正则表达式简单实用实例
这篇文章主要介绍了JavaScript正则表达式简单实用实例的相关资料,需要的朋友可以参考下
2017-06-06
JavaScript之移动端H5生成图片解决方案讲解
这篇文章主要介绍了JavaScript之移动端H5生成图片解决方案讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-08-08
JS实现的tab页切换效果完整示例
这篇文章主要介绍了JS实现的tab页切换效果,涉及javascript基于事件响应动态操作页面元素属性相关操作技巧,需要的朋友可以参考下
2018-12-12