问题描述

遍历一个对象，求大神帮个忙，前端技术有点菜

类似于这样的一种数据 var obj={"name":[1,2,3,4,5],"sex":[1,2,3,4,5],age:[1,2,3,4,5]}
要把这个对象放到一个table中。table是动态创建的，因为obj的属性是不确定的，还有属性的个数Obj在后端是一个map，一个键对应一个集合，map的个数不确定，在前台要创建一个table，放入一个div，

解决方案

     var obj = { "name": [1, 2, 3, 4, 5], "sex": [1, 2, 3, 4, 5, 6, 7], age: [1, 2, 3, 4, 5, 6], addr: [1, 2, 3, 4, 5], edu: [1, 2, 3, 4, 5, 6, 7, 8, 9] };
    var s = '<table border="1"><tr>';
    var arrMaxLen = 0;
    var keys = [];
    //生成表头
    for (var key in obj) {
        s += '<td>' + key + '</td>';
        arrMaxLen = Math.max(arrMaxLen, obj[key].length);//取得键值数组的最大下标，数据行数
        keys.push(key);
    }
    s += '</tr>';
    for (var i = 0; i < arrMaxLen; i++) {
        s += '<tr>';
        for (var j = 0; j < keys.length; j++) {
            s += '<td>' + (obj[keys[j]][i] || '&nbsp;') + '</td>';//注意这里，如果一些键值数组没有最大值，就是undefined，所以用空格替换
        }
        s += '</tr>';
    }

    s += '</table>';
    document.write(s);

解决方案二：

    success : function(data) {
                       var previewMap = $("#previewMap");
                      previewMap.show("slow");
                      var table = $("<table></table>");
                  for ( var fieldName in data) {
                         var td_ = $("<td></td>");
                         td_.html("<input value='"+fieldName+"' readonly='readonly'/>");
                         var list = data[fieldName];
                         var tr = $("<tr></tr>");
                     for ( var i in list) {
                        //tr.attr("id","tr_"+i);
                        var td = $("<td></td>");
                        td.html("<input value='"+list[i]+"' readonly='readonly'/>");
                         tr.append(td);
                         table.append(tr);
                    }
                      tr.prepend(td_);
                }
                previewMap.append(table);
        }       success : function(data) {
                       var previewMap = $("#previewMap");
                      previewMap.show("slow");
                      var table = $("<table></table>");
                  for ( var fieldName in data) {
                         var td_ = $("<td></td>");
                         td_.html("<input value='"+fieldName+"' readonly='readonly'/>");
                         var list = data[fieldName];
                         var tr = $("<tr></tr>");
                     for ( var i in list) {
                        //tr.attr("id","tr_"+i);
                        var td = $("<td></td>");
                        td.html("<input value='"+list[i]+"' readonly='readonly'/>");
                         tr.append(td);
                         table.append(tr);
                    }
                      tr.prepend(td_);
                }
                previewMap.append(table);
        }
    这是我写的，放出来是一条横向排列的

解决方案三：

        success : function(data) {
                       var previewMap = $("#previewMap");
                      previewMap.show("slow");
                      var table = $("<table></table>");
                  for ( var fieldName in data) {
                         var td_ = $("<td></td>");
                         td_.html("<input value='"+fieldName+"' readonly='readonly'/>");
                         var list = data[fieldName];
                         var tr = $("<tr></tr>");
                     for ( var i in list) {
                        //tr.attr("id","tr_"+i);
                        var td = $("<td></td>");
                        td.html("<input value='"+list[i]+"' readonly='readonly'/>");
                         tr.append(td);
                         table.append(tr);
                    }
                      tr.prepend(td_);
                }
                previewMap.append(table);
        }