應用場景：最近的專案中二級子頁面遍歷生成、操作表格比較多，記錄一下一直用的遍歷方法。

一般此類表格都是通過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;
}