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 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 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
967 个函式
2006/10/09 PHP
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
python实现泊松图像融合
2018/07/26 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
Python continue语句实例用法
2020/02/06 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
宝宝周岁宴答谢词
2014/01/26 职场文书
《狼》教学反思
2014/03/02 职场文书
实习报告评语
2014/04/26 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
高中同学会活动方案
2014/08/14 职场文书
财务工作个人总结
2015/02/27 职场文书
党员承诺书范文2015
2015/04/27 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python