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的性能优化 (repaint和reflow)
Apr 12 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
Bootstrap精简教程
Nov 27 Javascript
理解javascript模块化
Mar 28 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 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中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
PHP与以太坊交互详解
2018/08/24 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
vue.js表格分页示例
2016/10/18 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
python 整数越界问题详解
2019/06/27 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
如何运行带参数的python脚本
2019/11/15 Python
pandas DataFrame运算的实现
2020/06/14 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
模具毕业生推荐信
2014/02/15 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
同事打架检讨书
2015/05/06 职场文书
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫