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 相关文章推荐
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
JS封装cavans多种滤镜组件
Feb 15 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
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
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
python3使用matplotlib绘制散点图
2019/03/19 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
自我评价怎么写好呢?
2013/12/05 职场文书
棉花姑娘教学反思
2014/02/15 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
酒店端午节活动方案
2014/08/26 职场文书
超市开店计划书
2014/09/15 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
孝女彩金观后感
2015/06/10 职场文书
《绝招》教学反思
2016/02/20 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
Android自定义双向滑动控件
2022/04/19 Java/Android