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
jquery 批量上传图片实现代码
Jan 28 Javascript
javascript中万恶的function实例分析
May 25 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
简单分析javascript中的函数
Sep 10 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 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
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
django基于restframework的CBV封装详解
2019/08/08 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
python如何实现word批量转HTML
2020/09/30 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
美国精油公司:Plant Therapy
2019/05/17 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
教师应聘个人求职信
2013/12/10 职场文书
丑小鸭教学反思
2014/02/03 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
材料员岗位职责
2015/02/10 职场文书
长征观后感
2015/06/09 职场文书
《风娃娃》教学反思
2016/02/18 职场文书