JS添加删除一组文本框并对输入信息加以验证判断其正确性


Posted in Javascript onApril 11, 2013

在做项目中遇到这样一个问题,就是我们需要添加几组数据到数据库,但是具体几组数据不确定,有客户来填写,比如我们需要添加打折策略,可能个策略有很多组方案,比如“满100打5折,满200打4折,满500打3折”等等,这是作为一组方案来执行的,但是并不确定一组方案中有几个子方案,所以,这里我用JS进行添加删除子方案,并要对方案输入的正确性加以判断,并且通过json传输写入数据库,这里我们主要写如果添加删除一组子项目和如果给每个文本框添加验证。

动态添加一组文本框:

var countTable = 0; 
//添加表格行 
addTable = function () { 
//获得表格 
var tab1 = document.getElementById("discountTable"); 
//table中所有的单元格数 
// cell = tab1.cells.length; 
//table 中行数 
n = tab1.rows.length; 
//table 中的列数 
//cell = cell / n; 
//向table中加入行 
r = tab1.insertRow(n); 
//添加当前行的每个单元格 
r.insertCell(0).innerHTML = '消费满X元: <input type=\'text\' style="width:150px;" onblur="terifyNumFirst(this)" class =\'groupFirst\' /><label class="veritifyMessage" style="display:none; color: #F00;font-size:16px; width:10px;float:right">*</label>'; 
r.insertCell(1).innerHTML = '打折率:<input type=\'text\' style="width:150px;" onblur="terifyNumSecond(this)" class =\'groupSecond\' /><label class="veritifyMessage" style="display:none;font-size:16px ;color: #F00; width:10px;float:right">*</label>'; 
r.insertCell(2).innerHTML = '<input type="image" name="imageField" id="'+countTable+'" onclick="deleteTable(this)" src="../images/closeStraty.jpg" />'; 
countTable = countTable + 1; 
}

注:
1.这里的countTable应为全部变量,用于对每一行进行标识,这样就确定每一行都是不同的,防止删除一行后ID重复的情况。
2.在这里为每一个text添加了焦点离去事件,即当焦点离开当前文本框时,我们需要对其严重是否符合输入。
3.在文本框后加了label,作为验证控件,当我们输入的文本不符合要求时,该label可见。
删除任意一行:
//删除当前行 
deleteTable = function (el) { 
// alert( el.id); 
//获取table 
var tab1 = document.getElementById("discountTable"); 
//循环判断需要删除的行 
for (i = 0; i < tab1.rows.length; i++) { 
//获取行的ID 
var deleteValue = tab1.rows[i].cells[2].childNodes[0].id; 
//循环获得每行的id与当前点击的ID比较,相同则删除 
if (el.id == deleteValue) { 
tab1.deleteRow(i); 
break; 
} 
} 
}

首先我们需要是或许要删除行的位置,这里就需要通过循环对比表格中哪一行是当前点中行,然后进行删除。
如何显示和隐藏验证控件(当焦点离去文本时,对文本进行判断):
//验证第一条信息输入是否合法 
terifyNumFirst = function (objText) { 
var terifyText = objText.value; 
//信息不能为空 
if (terifyText== "") 
{ 
objText.parentNode.children[1].style.display="block"; 
return; 
} 
//信息必须为数字 
if (isNaN(terifyText)) 
{ 
objText.parentNode.children[1].style.display = "block"; 
return; 
} 
objText.parentNode.children[1].style.display = "none"; 
}

当全部信息需要写入时,我们同样需要进行判断,如果有不合法的提示,否则生成datatable返回,具体如何往后台传输,会在下篇博客中写道。
//生成DataTable对象 
function generateDtb() { 
//判断数据是否可以写入标志,false为可以写入,true为不可以写入 
var flag = false; 
//获取table 
var tab1 = document.getElementById("discountTable"); 
//第一列数据 
var firstGroup = document.getElementsByClassName("groupFirst"); 
//第二列数据 
var secondGroup = document.getElementsByClassName("groupSecond"); 
//判断验证信息是否合法 
var veritify = document.getElementsByClassName("veritifyMessage"); 
// alert(secondGroup.item(0).value); 
//判断是否为空 
for (var i = 0; i < firstGroup.length; i++) 
{ 
//判断第一列数据是否为空,为空则显示提示 
if (firstGroup[i].value == "") 
{ 
veritify[(i * 2)].style.display = "block"; 
flag = true; 
} 
//判断第二列数据是否为空,为空则显示提示 
if (secondGroup[i].value == "") 
{ 
veritify[(i * 2 + 1)].style.display = "block"; 
flag = true; 
} 
} 
for (var i = 0; i < veritify.length; i++) 
{ 
if (veritify[i].style.display == "block") 
{ 
flag = true; 
} 
} 
// alert(veritify.length); 
//如何输入信息都合法,则整理当前信息为数组,返回该信息进行处理。 
if (flag == false) { 
//写入 
var txtName = document.getElementById("txtName").value; 
//创建数组 
var dtb = new Array(); 
//通过循环把数据写入到数组并返回 
for (var i = 0; i < firstGroup.length; i++) { 
var row = new Object(); 
row.Name = txtName; 
row.fullMoney = firstGroup[i].value; 
row.discount = secondGroup[i].value; 
dtb.push(row); 
} 
return dtb; 
}

这里的验证也相对比较简单,只是验证文本框输入是否为空和是否为数字,用一个label的显示和隐藏来判断是否符合输入,在下篇文章中会写道如何把数组传入后台并写入数据库。
Javascript 相关文章推荐
Jquery常用技巧收集整理篇
Nov 14 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 #Javascript
在javascript中对于DOM的加强
Apr 11 #Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 #Javascript
在javascript中关于节点内容加强
Apr 11 #Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 #Javascript
jQuery实用基础超详细介绍
Apr 11 #Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 #Javascript
You might like
十天学会php之第一天
2006/10/09 PHP
PHP_MySQL教程-第一天
2007/03/18 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
php数组转成json格式的方法
2015/03/09 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
python中日期和时间格式化输出的方法小结
2015/03/19 Python
python文件操作相关知识点总结整理
2016/02/22 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
Python基于百度云文字识别API
2018/12/13 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
百度软件工程师职位
2013/02/14 面试题
我的长生果教学反思
2014/04/28 职场文书
拉歌口号大全
2014/06/13 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
提档介绍信范文
2015/10/22 职场文书