2 lyx15091286512 lyx15091286512 于 2015.07.25 10:08 提问

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

类似于这样的一种数据 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,

3个回答

showbo
showbo   Ds   Rxr 2015.07.25 13:02
     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);
lyx15091286512
lyx15091286512   2015.07.25 10:11
    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);
        }
    这是我写的,放出来是一条横向排列的
lyx15091286512
lyx15091286512   2015.07.25 10:12
        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);
        }
Csdn user default icon
上传中...
上传图片
插入图片