• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

JavaScript对象查看器代码

JavaScript 水墨上仙 3047次浏览

JavaScript对象查看器代码

// obj: object to inspect
// dest: destination to put the results in.
function inspect(obj, dest) {
        
    // prefent for errors
    if(obj == undefined || dest == undefined)
        return;
    
    if(window.jQuery)
    {
        obj = $(obj).get()[0];
        dest = $(dest).get()[0];
    }
   
    var keys = [],
        values = [];
      
    // functions
    var makeTableRow= function(val1, val2) {
        var tr = document.createElement("tr"),
            tdL = document.createElement("td"),
            tdR = document.createElement("td");
   
         tr.appendChild(tdL);
         tr.appendChild(tdR);
    
         tdL.appendChild(document.createTextNode(val1));
         tdR.appendChild(document.createTextNode(val2));
        
         return tr;
    };
    
    var setBooleanStyle = function(es) {
        es.color = "blue";
    };
    var setNumberStyle = function(es) {
        es.color = "darkblue";
        es.fontWeight = "bold";
    };
    
    var setUndefinedStyle = function(es) {
        es.color = "black";
    };
    
    var setFunctionStyle = function(es) {
        es.color = "purple";
    };
    
    var setStringStyle = function(es) {
        es.color = "red";
        es.fontStyle = "italic";
    };
    
    var setObjectStyle = function(es) {
        es.color = "green";
    };
    var setDefaultStyle = function(es) {
        //
    };
    
    // filter own properties
    for (var key in obj)
    {
        if(obj.hasOwnProperty(key))
        {
            keys.push(key);  
            values.push(obj[key]);
        }
    }
    
    // render
    
    // table
    var table = document.createElement("table"),
        thead = document.createElement("thead"),
        tbody = document.createElement("tbody");
    
    table.appendChild(thead);
    table.appendChild(tbody);
    
    // header
    thead.appendChild(makeTableRow("Key", "Value"));
   
    // body
    for(var i = 0; i<keys.length; i++)
    {
        var tr = document.createElement("tr"),
            left = document.createElement("td"),
            right = document.createElement("td");
    
        left.appendChild(document.createTextNode(keys[i]));
        right.appendChild(document.createTextNode(values[i]));
    
        tbody.appendChild(tr);
        tr.appendChild(left);
        tr.appendChild(right);
      
        // style
        var ls = left.style;
        ls.color = "gray";
        ls.fontWeight = "bold";
        ls.fontFamily = "Courier New";
        ls.fontSize = "12px";
        
        var rs = right.style;
        rs.fontFamily = "Courier New";
        rs.fontSize = "12px";
        
        switch(typeof values[i])
        {
             case "number":
                 setNumberStyle(rs);
                 break;
                
             case "undefined":
                 setUndefinedStyle(rs);
                 break;
                
             case "boolean":
                 setBooleanStyle(rs);
                 break;
                
             case "object":
                 setObjectStyle(rs);
                 break;
                
             case "string":
                 setStringStyle(rs);
                 break;
                
             case "function":
                 setFunctionStyle(rs);
                 break;
                
             default:
                 setDefaultStyle(rs);
         }
    }
    dest.appendChild(table);
}


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明JavaScript对象查看器代码
喜欢 (0)
加载中……