javascript对talbe进行动态添加、删除、验证实现代码


Posted in Javascript onMarch 29, 2012

如下图所示:
javascript对talbe进行动态添加、删除、验证实现代码
javascript对talbe进行动态添加、删除、验证实现代码
源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script type="text/javascript"> 
//进行数据验证 
function ValidateForm() { 
var booknamelist = document.getElementsByName("BookName"); 
var bookversionlist = document.getElementsByName("Version"); 
var booknumlist = document.getElementsByName("BookNum"); 
for (var i = 0; i < booknamelist.length; i++) { 
var bookname = booknamelist[i].value; 
var bookversion = bookversionlist[i].value; 
var booknum = booknumlist[i].value; 
if (bookname == "") { 
alert("第" + (i + 1) + "行的图书名称不能为空!"); 
return false; 
} 
if (bookversion == "") { 
alert("第" + (i + 1) + "行的图书版本不能为空!"); 
return false; 
} 
if (booknum == "") { 
alert("第" + (i + 1) + "行的图书数量不能为空!"); 
return false; 
} 
if (isNaN(booknum)) { 
alert("第" + (i + 1) + "行的图书数量输入的不正确!"); 
return false; 
} 
} 
return true; 
} 
var rowNum = 2; 
//添加一行 
function AddRow() { 
var myTable = document.getElementByIdx_x("myTable"); 
var newTr = myTable.insertRow(rowNum); 
var newTd1 = newTr.insertCell(0); 
newTd1.setAttribute("align", "center"); 
newTd1.innerHTML = '<input type="text" name="BookName" style="width:200px">'; 
var newTd2 = newTr.insertCell(1); 
newTd2.setAttribute("align", "center"); 
newTd2.innerHTML = '<input type="text" name="Version" style="width: 120px" />'; 
var newTd3 = newTr.insertCell(2); 
newTd3.setAttribute("align", "center"); 
newTd3.innerHTML = '<input type="text" name="BookNum" style="width: 56px" />'; 
var newTd4 = newTr.insertCell(3); 
newTd4.setAttribute("align", "center"); 
newTd4.innerHTML = '<input type="text" name="BookAuthor" style="width: 70px" />'; 
var newTd5 = newTr.insertCell(4); 
newTd5.setAttribute("align", "center"); 
newTd5.innerHTML = '<input type="text" name="BookPress" style="width: 102px" />'; 
rowNum++; 
} 
//删除最后一行 
function DeleteRow() { 
var myTable = document.getElementByIdx_x("myTable"); 
if (rowNum > 1) { 
myTable.deleteRow(rowNum-1); 
rowNum--; 
} 
} 
</script> 
</head> 
<body> 
<table id="myTable" cellspacing="0px" cellpadding="2px" width="700px"> 
<tr> 
<td align="center" style="color: #006699; font-weight: bold;"> 
图书名称 
</td> 
<td align="center" style="color: #006699; font-weight: bold;"> 
版 本 
</td> 
<td align="center" style="color: #006699; font-weight: bold;"> 
数量(本) 
</td> 
<td align="center" style="color: #006699; font-weight: bold;"> 
图书作者 
</td> 
<td align="center" style="color: #006699; font-weight: bold;"> 
出版社 
</td> 
</tr> 
<tr> 
<td align="center"> 
<input name="BookName" type="text" style="width: 200px" /> 
</td> 
<td align="center"> 
<input type="text" name="Version" style="width: 120px" /> 
</td> 
<td align="center"> 
<input type="text" name="BookNum" style="width: 56px" /> 
</td> 
<td align="center"> 
<input type="text" name="BookAuthor" style="width: 70px" /> 
</td> 
<td align="center"> 
<input type="text" name="BookPress" style="width: 102px" /> 
</td> 
</tr> 
</table> 
<div> 
<input type="button" value="添加图书" onclick="AddRow()" /><input type="button" value="删除图书" 
onclick="DeleteRow()" /><input type="button" value="提交" onclick="ValidateForm()" /></div> 
</body> 
</html>
Javascript 相关文章推荐
javascript 类定义的4种方法
Sep 12 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
jquery操作select大全
Apr 25 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
vue中echarts引入中国地图的案例
Jul 28 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
jQuery 下拉列表 二级联动插件分享
Mar 29 #Javascript
50款非常棒的 jQuery 插件分享
Mar 29 #Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 #Javascript
Javascript面向对象扩展库代码分享
Mar 27 #Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 #Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 #Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 #Javascript
You might like
php继承的一个应用
2011/09/06 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python基于ID3思想的决策树
2018/01/03 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
在python中安装basemap的教程
2018/09/20 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
详解numpy的argmax的具体使用
2019/05/27 Python
python多线程与多进程及其区别详解
2019/08/08 Python
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
Hibernate持久层技术
2013/12/16 面试题
考试作弊检讨书大全
2014/02/18 职场文书
社区健康教育实施方案
2014/03/18 职场文书
党员公开承诺书
2014/03/25 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
离婚被告答辩状
2015/05/22 职场文书