JS添加删除一组文本框并对输入信息加以验证

在做项目中遇到这样一个问题，就是我们需要添加几组数据到数据库，但是具体几组数据不确定，有客户来填写，比如我们需要添加打折策略，可能个策略有很多组方案，比如“满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的显示和隐藏来判断是否符合输入，在下篇文章中会写道如何把数组传入后台并写入数据库。