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下写一个事件队列操作函数
Jul 19 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
JS严格模式原理与用法实例分析
Apr 27 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多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
Python ljust rjust center输出
2008/09/06 Python
Django admin美化插件suit使用示例
2017/12/12 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
python3的输入方式及多组输入方法
2018/10/17 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
Python中pass的作用与使用教程
2020/11/13 Python
Python解析微信dat文件的方法
2020/11/30 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
争论的故事教学反思
2014/02/06 职场文书
进步之星获奖感言
2014/02/22 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
社区文化建设方案
2014/05/02 职场文书
关爱空巢老人感想
2015/08/11 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers