html、jsp页面标签的遍历

57 阅读 0 评论 38 点赞

我是靠谱客的博主高大纸飞机，最近开发中收集的这篇文章主要介绍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;
}