一个简单的问题？

我想做到点击添加用户按钮就显示id="userinfo"着个divstyle type="text/css">
         #userinfo table{
         display:none;
          }
          
          #users table{
           position: relative;
        }
        </style>
        <script type="text/javascript" src="jquery-1.8.0.js"></script>
        <script type="text/javascript">
         $(function(){
         $("#adduser").click(function(){
         $("#userinfo").css({display:"block"});
         });
         })
        
        </script>
    </head>
    <body>
     <input type="button" value="添加用户" id="adduser"/>
     <div id="userinfo" height="100px" width="100px">
     <table border="1">
     <tbody>
         <tr><td>用户名:</td><td><input type="text" name="username"/></td></tr>
             <tr><td>生    日:</td><td><input type="text" name="birthday"/></td></tr>
             <tr><td>email:</td><td><input type="text" name="email"/><br/></td></tr>
         </tbody>
     </table>
     </div>
     <div id="users">
     <table border="1" cellpadding="0" cellspacing="0" width="600">
     <tr>
     <td>选择</td>
     <td>用户名</td>
     <td>生日</td>
     <td>email</td>
     <td>操作</td>
     </tr>
     </table>
     </div>
    </body>

解决方案 »

  1.   


    document.getElementById("adduser").onclick = function() {
       document.getElementById("userinfo").style.display = "block";
    }
      

  2.   

    谢谢你，我已近知道问题了，  #userinfo table{
                    display:none;
              }
              这里应该是 #userinfo{
                    display:none;
              }
    顺便请问下，有没有遮罩层的例子给个来参考下。
      

  3.   

    1楼的正解。
    先设置userinfo这个div的style="display:none"。设置这个div开始是隐藏的，这样加上1楼的事件，点击就可以显示
      

  4.   

    遮罩层的意思是两个div在同一个地方，显示一个不显示另一个，点击某个按钮之后显示另一个？
      

  5.   

      #userinfo table{
                    display:none;
              }==>  #userinfo{
                    display:none;
              }