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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
JS正则表达式常见函数与用法小结
Apr 13 Javascript
Vue实现穿梭框效果
Sep 30 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
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
django文档学习之applications使用详解
2018/01/29 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
Haggar官网:美国男装品牌
2020/02/16 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
应届大学生的推荐信
2013/11/20 职场文书
房地产项目建议书
2014/03/12 职场文书
公司总经理岗位职责
2014/03/15 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
文明班级建设方案
2014/05/15 职场文书
娱乐节目策划方案
2014/06/10 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
高一化学教学反思
2016/02/22 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
MySQL的索引你了解吗
2022/03/13 MySQL