javascript - 如何在 php 中单击按钮显示表格？

Question

我想将 mysql 表中的文件列出到 php 中的网页。为此，我使用表格，以便我有更常规的 View 。现在一页上有 n 个表格。这个 n 取决于 mysql 查询。我可以在页面上列出文件。但是如果表中的行数增加并且 n 的值也增加，那么我的页面长度将会很长。所以我想为每个表提供一个 TreeView 。就像每个表上方都会有一个带有值“+”的按钮。当我单击它时，值会更改为“-”，并且该表应该可见。 这是我尝试过的

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

这不是确切的代码。

正如你所看到的，我能够做到这一点，但我使用的是复选框。我想要一个带有值 + 或 - 的按钮。这段代码有一个问题。如果我单击复选框，则显示复选框的行会展开，这意味着它会占据整行，而不仅仅是复选框。那么有人可以帮助我吗？

谢谢

Answer 1

我知道这是一个代码示例，将来尝试提供一个jsFiddle以方便人们提供帮助。如果你想使用+/- ，您可以进行较小的修改，例如 my example

<th colspan="2" width="100%"><span class="show"></span></th>

我基本上将 show 类添加到 <th> 内的跨度中并在其上附加了一个点击处理程序。当您单击它时，它将切换 <td>在父级内 <table> ...此外，它还会检查 <th> 中的文本值并反转它

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

因为您不需要复选框并且您正在使用 <span> ，它不会覆盖整个 <th> 。这是您要找的吗？