如何在php中单击按钮显示表格?

时间:2013-11-26 08:45:19

标签: javascript php jquery html mysql

我想将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。我想要一个值为+或 - 的按钮。这段代码有一个问题。复选框显示的行,如果我点击它,表格将被展开,这意味着它不仅取整个行的复选框。所以任何人都可以帮助我吗?

由于

2 个答案:

答案 0 :(得分: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>。这是你在找什么?

答案 1 :(得分:0)

获得解决方案

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

});
});

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