Jquery附加一个div区域

时间:2011-09-24 16:46:11

标签: jquery

您好我想在每次在我的代码中单击一个按钮时在表格中添加一个新行,下面的代码可以工作,但我希望它在DIV标签中称为'selector',作为我表的一个补充,而是它出现在页面顶部,我做错了什么?谢谢

        <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>

1 个答案:

答案 0 :(得分:3)

您的代码无效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>