jquery append div area

Question

嗨我想在每次单击按钮时在表中添加一个新行，下面的代码工作，但我期待它在称为'选择器'的DIV标记内作为一个补充我的表，而是它出现在页面的顶部，请问我做错了什么？谢谢

 <script type="text/javascript"> 
      $(document).ready(function(){ 
       $("#test").click(function() { tested(this) }); 
      }); 


      function tested() { 

      newline = "<tr bgcolor='#666666'><td>&nbsp;</td> <td><input type='button' id='test1' value='Click to Test' /></td><td>&nbsp;</td> </tr> " ; 

      $('#selector').append(newline) 
      } 

     </script> 

      <table width="500" border="1" cellspacing="1" cellpadding="1" bgcolor="#CCCCCC" align="center"> 
       <tr> 
       <td width="50">top</td> 
       <td>&nbsp;</td> 
       <td width="50">&nbsp;</td> 
       </tr> 

      <div id='selector' > 
       <tr bgcolor="#666666"> 
       <td>&nbsp;</td> 
       <td><input type="button" id="test" value="Click to Test" /></td> 
       <td>&nbsp;</td> 
       </tr> 
       </div> 

       <tr> 
       <td>Bottom</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       </tr> 

      </table> 

      </body> 
      </html> 

Answer 1

您的代码是无效的html - 这必然会导致不同浏览器中的意外行为。

不能包括div标签为table的直接子 - 使用tbody为此，这一翻译：

<table width="500" border="1" cellspacing="1" cellpadding="1" bgcolor="#CCCCCC" align="center"> 
    <thead> 
      <tr> 
      ... 
      </tr> 
    </thead> 
    <tbody id='selector' > 
      ... 
    </tbody> 
</table>