如何在php中單擊按鈕時顯示表格？

Question

我想將文件從mysql表列出到php中的網頁。 為此，我使用表格，以便可以查看更多常規視圖。 現在，一個頁面上有n個表。 這個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>

這不是確切的代碼。

如您所見，我能夠做到，但我使用的是chackbox。 我想有一個帶有+或-值的按鈕。 此代碼存在一個問題。 如果我單擊它，則在其中顯示復選框的行中表格已展開，這意味着它占據了整行，而不僅僅是復選框。 那么有人可以幫助我嗎？

謝謝

Answer 1

我知道這是一個代碼示例，將來嘗試提供jsFiddle以使人們更容易獲得幫助。 如果要使用+/- ，則可以像我的示例一樣進行較小的修改

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

我基本上將show類添加到了<th>的范圍內，並在其上附加了一個單擊處理程序。 當您單擊它時，它將在父 <table>切換<td> ...。此外，它將檢查<th>的文本值並將其取反

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

由於您不需要復選框，而您正在使用<span> ，因此它不會覆蓋整個<th> 。 這是您要找的東西嗎？

Answer 2

獲取解決方案

<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 = "+";

});
});

它按我想要的方式工作正常。