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 相关文章推荐
js 图片等比例缩放代码
May 13 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
javascript随机变色实例代码
Oct 15 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 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 一个比较完善的简单文件上传
2010/03/25 PHP
php中取得文件的后缀名?
2012/02/20 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Python分支结构(switch)操作简介
2018/01/17 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
商务英语专业自荐信
2013/10/14 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
运动会通讯稿100字
2015/07/20 职场文书
教师岗位说明书
2015/09/30 职场文书