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>