jquery在每个按钮下方弹出div

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("button").click(function(){
$("#mydiv(1)").slideToggle("slow");
});
});
</script>
</head><body><% for i=1 to 10%>
<table width="200" border="1">
  <tr>
    <td><button type="button" id="mybtn">click</button></td>
  </tr>
  <tr>
    <td><div id="mydiv" style="display:none; background-color:#0FF; height:200PX">this is out div</div></td>
  </tr>
</table>

<%next%></body>
</html>
我想要点击每个按钮时，都在其下方弹出div，而不只是在顶端弹出div，我这个代码为什么只能在顶端弹出div，请大家帮忙！

解决方案 »

  1.   


    var offset =$("button").offset();
    $("#mydiv").css("position", "abosolute").css("left", offset.left+"px").css("top", offset.top+"px").show();
    位置不对自己在通过offset.left/top去加减调整一下就OK了
      

  2.   

    1：for循环输出结构，id却使用同样的。这明显不符合规范。你要么就用name命名，要使用id命名你就得让id不同
    mybtn1~mybtn10
    mydiv1~mydiv102：$("#mydiv(1)").slideToggle("slow");自己去看看jQuery的选择器吧
      

  3.   


    这个已经够详细了吧，你去获取当前button的位置，然后用绝对定位去设置你将要显示的层的left和top，最多在设置一个z-index属性就OK了啊。同意8楼的说法，在使用选择器的时候一定要注意规范。