如何在php页面中启用树视图?
我有一个mysql数据库。在一个表中,我有一些上传文件的条目。我想在php页面上显示它。但这些文件按一列进行分类。所以我想要的是在那个页面上有分类名称。在每个名字前面我想有一个按钮。最初加载页面时,不应显示文件。当有人点击一个按钮时,相应的类别就会展开。 但是我做不到。我给你一个示例代码的链接。 HTML代码如何在php页面中启用树视图?,php,jquery,mysql,Php,Jquery,Mysql,我有一个mysql数据库。在一个表中,我有一些上传文件的条目。我想在php页面上显示它。但这些文件按一列进行分类。所以我想要的是在那个页面上有分类名称。在每个名字前面我想有一个按钮。最初加载页面时,不应显示文件。当有人点击一个按钮时,相应的类别就会展开。 但是我做不到。我给你一个示例代码的链接。 HTML代码 <span class="show"></span> <p>category</p> <table width='100%' clas
<span class="show"></span>
<p>category</p>
<table width='100%' class='tree'>
<tr>
<td width='70%'><b>Name</b></td>
<td width='30%'><b>Last Updated</b></td>
</tr>
</table>
类别
名称
最后更新
编辑
这是我展示表格的示例html代码。这段代码有一些变量名,sql查询不适用于此。我在这里找到了答案,但这在这里不起作用。我不知道为什么
<span class="show"></span>
<p><b>category<b></p><br/>
<table width='100%' class='tree'>
<tr>
<td width='35%'><b>Name</b></td>
<td width='25%'><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='25%'>{$row['created']}</td>
<td width='25%'><input type='checkbox' class='checkbox'><input type='button' class= 'input1 input_box' value='delete' name='delete' id= '{$row['id']}'><input type='button' class='input2 input_box2' value='edit' name='edit' id= '{$row['id']}'></td>
</tr>
}
</table>
类别
名称
最后更新
而($row=$result\u sql->fetch\u assoc())
{
{$row['created']}
}
$(文档).ready(函数(){
$(“.show”).html(“”);
$('.tree').hide();
$('.treebtn')。在('click',function()上{
$(this).parent('span').next('table').toggle();
如果(this.value==“全部显示”)this.value=“全部隐藏”;
否则,请单击此项。value=“全部显示”;
});
});
查看您的代码,下一个选择器的使用存在缺陷。来自Jquery.com: .下一步([selector])
说明: 获取匹配元素集中每个元素紧跟其后的同级。如果提供了选择器,则仅当它与该选择器匹配时,才会检索下一个同级。 我建议在按钮和表格上加一个div,并使用以下代码:
$(document).ready(function(){
$(".show").html("<input type='button' value='Show All' class='treebtn'>");
$('.tree td').hide();
$('.treebtn ').click( function() {
$(this).parent().parent().find('table td').toggle();
if (this.value=="Show All") this.value = "Hide All";
else this.value = "Show All";
});
});
$(文档).ready(函数(){
$(“.show”).html(“”);
$('.tree td').hide();
$('.treebtn')。单击(函数(){
$(this.parent().parent().find('table td').toggle();
如果(this.value==“全部显示”)this.value=“全部隐藏”;
否则,请单击此项。value=“全部显示”;
});
});
您的问题是搜索兄弟姐妹,因此它找不到表
。尝试遍历父按钮(span
),然后查找span的同级表-
$(this).parent().nextAll('table:first').find('td').toggle();
更新的JSFIDLE-
这是一个更新的JSFIDLE,它有多个按钮/表格-谢谢你的回答,但我在一个页面上有不止一个类别。你的解决方案没有给出正确的输出,看这个小提琴是的,这是正确的,但我已经编辑了这个问题。我已经提供了php代码,但解决方案不起作用。既然你说要忽略变量名和sql查询,你能发布一个输出html代码的示例,而不是php代码吗?这是正确的解决方案。它终于起作用了。犯一些愚蠢的错误。
$(this).parent().nextAll('table:first').find('td').toggle();