jQuery追加一個div區域

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>