應用場景：最近的項目中二級子頁面遍歷生成、操作表格比較多，記錄一下一直用的遍歷方法。
一般此類表格都是通過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;
}