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 Event学习第六章 事件的访问
Feb 07 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
小程序自定义模板实现吸顶功能
Jan 08 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
JS模拟键盘打字效果的方法
2015/08/05 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
网吧消防安全制度
2014/01/28 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
企业负责人任命书
2014/06/05 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android