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 相关文章推荐
详解JS函数重载
Dec 04 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
JavaScript 中的六种循环方法
Jan 06 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
建立动态的WML站点(二)
2006/10/09 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
php实现微信发红包功能
2018/07/13 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
python正则表达式抓取成语网站
2013/11/20 Python
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
Python socket聊天脚本代码实例
2020/01/02 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
材料物理专业个人求职信
2013/12/15 职场文书
租房协议书范文
2014/08/20 职场文书
股份合作协议书
2014/09/10 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
Python面向对象编程之类的概念
2021/11/01 Python
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python