Ajax动态获取集合里的数据 渲染页面表格

走了好多弯路，主要是只是考虑了一下方案，没有画出方案流程图，导致实现的过程中重新思考流程以至于紊乱；
PS：想到设计思路，画下流程思路图或步骤，落实以后再进行着手实现，会事半功倍，切记。。。切记。。。。

步骤:

1. 处理success:function(data)-> data tempKeys
2. 根据1的处理 渲染表头
3. 表体内容的渲染 逐行渲染
   • 根据1的处理 得到需要的行数 data.length
   • 为每一行加入列 tempKeys
   • 为该行的每一列进行赋值 $(“td[name=’+colName+”‘]”).text();

if(data){
    //对返回的数据进行加工处理
    var jsonKeys = {},tempKeys=[];
    data.forEach(function(data){
        for(var key in data){
            if(!jsonKeys[key]){
                jsonKeys[key]=true;
                tempKeys.push(key);
            }
        }
    });
    //增加表头
    var theadStr="";
    $('#tab thead').empty("");//清空表头
    theadStr+="<tr><th></th>";
    tempKeys.forEach(function(key){
        var thStr = "<th class='"+key+"'>"+key+"</th>";
        theadStr+=thStr;
    });
    theadStr+="</tr>";
    $('#tab thead').append(theadStr);

    //增加表的内容
    var length = data.length;
    $('#tab tbody').empty("");//清空表的内容
    for(var j=0;j<length;j++){//依次输出每一行数据
        var tbodyRowStr="";
        tbodyRowStr+="<tr class='row"+j+"'>"
        tbodyRowStr+="<td align='center'><input type='checkbox' name='checkGroup'/></td>";
        tempKeys.forEach(function(key){
            var tdStr = "<td name='"+key+j+"'>"+"</td>";//渲染该行的每一列
            tbodyRowStr+=tdStr;
        });
        tbodyRowStr+="</tr>";
        $('#tab tbody').append(tbodyRowStr);//渲染每一行
        var row = data[j];
        for(var col in row){//为当前行的列赋值
            var text = row[col];
            var colName = col+j;
            $("td[name='"+colName+"']").text(text);
        }
    }
}

日积月累，加油！