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