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>