html、jsp页面标签的遍历

应用场景：最近的项目中二级子页面遍历生成、操作表格比较多，记录一下一直用的遍历方法。

一般此类表格都是通过ajax请求数据，然后从callbackFunction中获取数据集合，遍历生成表：

eg：

var postData=new Object();

    postData.idString=idString;

    $.ajax({

    url:'debt/findXXXList.do'+'?t='+Math.random()+'&token='+token,

    data:postData,

    type:'POST',

    dataType:'json',

    success:function(data){

        //初始化数据

        $("#confirmInf").empty();

        for(var i=0;i<data.length;i++){

            var inf=data[i];

            var realname=inf.real_name;

            var amount=inf.original_amount_cny;

            var debtID=inf.debtID;

            var html='<tr><td><a class="name" title='+realname+' style="margin-right:0px;">'+realname+'</a></td>';

            var html2='<td class="abstract shuheixian"><input type="text" id="detils" placeholder="摘要内容不超过20个字" debtid='+debtID+' maxlength="20" autofocus></td>';

            var html3='<td class="sum">'+amount+'</td><td class="sum"></td>';

            var html4='<td class="sum">'+amount+'</td></tr>';

            $("#confirmInf").append(html+html2+html3+html4);

        }

        //弹出窗口

        var maskHight=$(document).height();

        var maskWidth=$(document).width();

        $('<div class="mask"></div>').appendTo($('body'));

        $('div.mask').css ({

              'opacity':0.5,

              'background':'#000',

              'position':'absolute',

              'left':0,

              'top':0,

              'width':maskWidth,

              'height':maskHight,

              'z-index':9999

        });

        $('.accept_contain').show();

        gaoduDIV();//样式

        $(".accept_contain input").eq(0).focus();

   },

    error:function(){

        console.log("error初始化数据出错。。。");

        //发送请求给发送邮件接口（邮件接口处理掉异常信息），调用给后台提示尽快修复

        var pageName="new/receivedClaims";

        var type ="findReceivedDebtPageList===初始化弹窗失败===jsp434行";

        tips("系统升级中，请稍后进行尝试。",false);

    },

 });

此时，弹出二级页面，并且循环生成了表格数据。

这时候，需要对表格中的input标签内容进行验证，而常规的通过id获取标签的方式不能准确定位到某条循环生成的数据.

此时分为两种情况：

1、获取某一行中编辑过的多条数据。

这个需要定位到每个标签，并且从标签中获取我们所需要的数据。对应着标签结构慢慢找并不难:

//验证

    if(!validate()){

        return false;

    }

    var dataStr="";

    var flag=1;
    var Obj1=document.getElementsByClassName("dataInfo");//关键！获取所有tr标签，然后根据结构去一层层的找

    for (var i=0;i<Obj1.length;i++ ){

        var obj=Obj1[i].childNodes;

        var type ="claims";

        var debtid=obj[0].attributes["debtid"].value;

        var debtstatus=obj[0].attributes["debtstatus"].value;

        var detils=obj[2].childNodes[0].value;

        var amount1=obj[3].childNodes[0].value;

        var amount2=obj[4].childNodes[0].value;

        //数据合法性调整

        if(amount1==""){amount1=0};

        if(amount2==""){amount2=0};

        

        //str拼接

            if(flag==1){

                dataStr+=debtstatus+"&.&"+debtid+"&.&"+detils+"&.&"+amount1+"&.&"+amount2+"&.&";

                flag=-1;

            }else{

                dataStr+="@*@"+debtstatus+"&.&"+debtid+"&.&"+detils+"&.&"+amount1+"&.&"+amount2+"&.&";

            }

        }

2、对每一行的某一列数据进行验证。

这个用的jquery：

//数据验证

function validate(){

    var result =true;

    //摘要字段验证
    $("#editInf input[id='intro'][type='text']").each(function(){//关键：选择器的使用 id为editInf的标签下所有 id=editInf 类型为text的标签

        var value=$(this).val();

        if(value==null||value==''||value.length==0){

            $(this).val("");

            $(this).attr("style","background-color: #FFC1C1");

            $(this).attr("placeholder","摘要不能为空");

            result = false;

        }

    });

    //金额1验证

    $("#editInf input[id='amount1'][type='text']").each(function(){

        

        var value=$(this).val();

        if(!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)){

            $(this).val("");

            $(this).attr("style","background-color: #FFC1C1");

            $(this).attr("placeholder","请填写数字");

            result = false;

        }

    });

    //金额2验证

    $("#editInf input[id='amount2'][type='text']").each(function(){

        var value=$(this).val();

        if(!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)){

            $(this).val("");

            $(this).attr("style","background-color: #FFC1C1");

            $(this).attr("placeholder","请填写数字");

            result = false;

        }

        

    });

    return result;

}