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的面向对象方法以及差别
Mar 31 Javascript
javascript 选择文件夹对话框(web)
Jul 07 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
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
模仿OSO的论坛(二)
2006/10/09 PHP
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
动态添加js事件实现代码
2009/03/12 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
老生常谈进程线程协程那些事儿
2017/07/24 Python
python 动态调用函数实例解析
2019/10/21 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
python时间time模块处理大全
2020/10/25 Python
python实现网页录音效果
2020/10/26 Python
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
公司庆典邀请函范文
2014/01/13 职场文书
机修工工作职责
2014/02/21 职场文书
目标责任书范本
2014/04/16 职场文书
白莲教口号
2014/06/18 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
英文道歉信
2015/01/20 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis