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


Posted in Javascript onJuly 11, 2013

下面用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>

效果如下图所示:
js动态生成指定行数的表格 
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>

生成效果如下:
js动态生成指定行数的表格 
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 addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 #Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 #Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 #Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 #Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 #Javascript
js Map List 遍历使用示例
Jul 10 #Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 #Javascript
You might like
PHP分页显示制作详细讲解
2006/10/09 PHP
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
vuex实现简易计数器
2016/10/27 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
js实现扫雷源代码
2020/11/27 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
C语言编程题
2015/03/09 面试题
理货员的岗位职责
2013/11/23 职场文书
公司运动会策划方案
2014/05/25 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
2014年信用社工作总结
2014/11/25 职场文书
初中成绩单评语
2014/12/29 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
Python实现拼音转换
2021/06/07 Python