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 相关文章推荐
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
vue.js的安装方法
May 12 Javascript
vue params、query传参使用详解
Sep 12 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
Promise扫盲贴
Jun 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
Windows下的PHP5.0详解
2006/11/18 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
Vuex提升学习篇
2018/01/11 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
mpvue 单文件页面配置详解
2018/12/02 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
python编写Logistic逻辑回归
2020/12/30 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
Python实现的特征提取操作示例
2018/12/03 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
质量工程师岗位职责
2013/11/16 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
计算机毕业生求职信
2014/06/10 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
青年教师个人总结
2015/02/11 职场文书
单独二胎证明
2015/06/24 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书