html、jsp页面标签的遍历

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

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

eg：

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

这时候，需要对表格中的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;

}

秒客网

html、jsp页面标签的遍历

相关文章