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