应用场景：最近的项目中二级子页面遍历生成、操作表格比较多，记录一下一直用的遍历方法。
一般此类表格都是通过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;
}