html中实现点击表格某一行后在其下面弹出一行表格

*{margin:0;padding:0;}
table { border-collapse: collapse; border-spacing: 0 }
table td{border:1px solid #ccc; height:30px; line-height:30px;text-align:center;position:relative;}
table td p{}
table td .box{width:300px;height:300px;background:#f00; position:absolute;top:30px;left:0;z-index:9999;display:none;}



    $(function(){
        $('table tr').each(function(){
            $(this).find('td:first').click(function(){
                $(this).children('.box').show();    
            });
        });
        $(document).click(function(e){
            var target = $(e.target);
            if(target.closest("table tr").length == 0){
                $(".box").hide();
            }
        });
    })





    
        
            
IP

            点击的时候出现