Javascript 如何在php中单击按钮时显示表？

我想用php将mysql表中的文件列表到网页中。为此，我使用表，这样我就有了更规则的视图。现在一页上有n个表。这取决于mysql查询。我可以在页面上列出文件。但若表中的行数增加，并且n的值也增加，那个么我的页面长度将非常长。所以我想给每个表一个树状视图。每个表上都会有一个值为“+”的按钮。当我点击它时，它的值变为“-”，这个表应该是可见的。 这是我试过的

<script type="text/javascript">
$(document).ready(function(){
  $(".show").html("<input type='checkbox'>");
  $('.tree td').hide();
  $('th ').click( function() {
    $(this).parents('table').find('td').toggle(); 
  });
});

 <table width="100%" class="tree">
 <tr width="20px"><th colspan="2" class="show"> </th></tr>                          
 <tr>
   <td width="50%"><b>Name</b></td>
   <td width="50%"><b>Last Updated</b></td>
 </tr>

  while($row = $result_sql->fetch_assoc()) 
  {
         <tr>
         <td width='50%'><a href='http://127.0.0.1/wordpress/?page_id=464&name_file={$row['name']}&cat={$cat}&sec={$sec}' target='_blank'>{$row['title']}</a></td>
         <td width='50%'>{$row['created']}</td>                             
         </tr>
  }
  </table>

$（文档）.ready（函数（）{
$（“.show”）.html（“”）；
$（'.tree td'）.hide（）；
$（'th'）。单击（函数（）{
$（this.parents（'table'）.find（'td'）.toggle（）；
});
});
名称
最后更新
而（$row=$result\u sql->fetch\u assoc（））
{
{$row['created']}
}

这不是准确的代码。

正如你所看到的，我可以做到这一点，但我使用的是一个查克盒。我想要一个值为+或-。这段代码有一个问题。如果单击复选框，则该复选框所在的行表示表已展开，这意味着该复选框将占据整行，而不仅仅是复选框。有人能帮我吗

---

谢谢

我知道这是一个代码示例，以后尝试提供一个JSFIDLE，让人们更容易提供帮助。如果您想使用

+/-

，您可以进行如下小修改

因为您不需要复选框，而且您使用的是

，所以它不会覆盖整个

。这就是你想要的吗？

获取解决方案

<script type="text/javascript">
$(document).ready(function(){
$(".show").html("<input type='button' value='+' class='treebtn'>");
$('.tree td').hide();
$('.treebtn ').click( function() {
$(this).parents('table').find('th').parents('table').find('td').toggle(); 
if (this.value=="+") this.value = "-";
else this.value = "+";

});
});

$（文档）.ready（函数（）{
$（“.show”）.html（“”）；
$（'.tree td'）.hide（）；
$（'.treebtn'）。单击（函数（）{
$（this）.parents（'table'）.find（'th'）.parents（'table'）.find（'td'）.toggle（）；
如果（this.value==“+”）this.value=“-”；
否则，该值为“+”；
});
});

---

它按我所希望的方式运行良好。

如果你有多个表格可以增加页面长度，那么你可以使用“手风琴”。可能是这样的，谢谢ashish，但这不是我的要求。尽管我自己找到了答案C.S.的努力值得检查解决方案。这个解决方案正是我想要的。只有在这期间，我也能解决它。但我接受并投票决定答案

$('.show').click(function () {
    $(this).parents('table').find('td').toggle();
    $(this).text() == '+' ? $(this).text('-') : $(this).text('+');
});

<script type="text/javascript">
$(document).ready(function(){
$(".show").html("<input type='button' value='+' class='treebtn'>");
$('.tree td').hide();
$('.treebtn ').click( function() {
$(this).parents('table').find('th').parents('table').find('td').toggle(); 
if (this.value=="+") this.value = "-";
else this.value = "+";

});
});