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 不只是脚本
May 30 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
js生成随机数方法和实例
Jan 17 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 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中返回引用类型的方法
2015/04/03 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
JS 统计时间
2021/03/09 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
js中的this关键字详解
2013/09/25 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
python3+PyQt5实现文档打印功能
2018/04/24 Python
详解Python发送email的三种方式
2018/10/18 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
python树莓派红外反射传感器
2019/01/21 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
python文字转语音实现过程解析
2019/11/12 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
python实现三壶谜题的示例详解
2020/11/02 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
小学家长会邀请函
2014/01/23 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL