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 相关文章推荐
javascript实现的网页局布刷新效果
Dec 01 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 Javascript
vue项目中js-cookie的使用存储token操作
Nov 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编实现程动态图像的创建代码
2008/09/28 PHP
php adodb分页实现代码
2009/03/19 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
php中switch语句用法详解
2015/08/17 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
vue的toast弹窗组件实例详解
2018/05/14 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
Python中使用PDB库调试程序
2015/04/05 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
粗略分析Python中的内存泄漏
2015/04/23 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
《欢乐的泼水节》教学反思
2014/04/22 职场文书
文明城市标语
2014/06/16 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书