[英]How to enable a tree view in php page?
I have a mysql database. 我有一个mysql数据库。 In a table i have some entries of uploaded file. 在表格中,我有一些上传文件的条目。 I want to display that on a php page. 我想在php页面上显示它。 But those files are categorized by one column. 但这些文件按一列分类。 So what i want is to have that categories name on that page. 所以我想要的是在该页面上有类别名称。 In front of each name i want to have a button. 在每个名字前面我想要一个按钮。 Initially when page loads it should not show the files. 最初在页面加载时,它不应显示文件。 when some one click on a button then that corresponding category should expand. 当有人点击按钮时,相应的类别应该展开。 But i am unable to do it. 但我无法做到。 I am giving you a link to sample code. 我给你一个示例代码的链接。 HTML code HTML代码
<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>
http://jsfiddle.net/SumitRathore/FqcSM/ http://jsfiddle.net/SumitRathore/FqcSM/
Edit 编辑
this is my sample html code where i am showing the tables. 这是我的示例html代码,我正在显示表格。 This code have some variables name and sql query don't go for that. 这段代码有一些变量名称和sql查询不适用于此。 I have found the answer here http://jsfiddle.net/JGLaa/2/ but that is not working here. 我在http://jsfiddle.net/JGLaa/2/找到了答案,但这不适用于此。 I dont know why? 我不知道为什么?
<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>
Looking at you code the use of the next selector is flawed. 看着你的代码,下一个选择器的使用是有缺陷的。 From Jquery.com: 来自Jquery.com:
.next( [selector ] ) .next([selector])
Description: Get the immediately following sibling of each element in the set of matched elements. 描述:获取匹配元素集中每个元素的紧随其后的兄弟。 If a selector is provided, it retrieves the next sibling only if it matches that selector. 如果提供了选择器,则仅当它与该选择器匹配时,它才会检索下一个兄弟。
I would suggest to sourround your button and table with a div and use the following code: 我建议用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";
});
});
Your issue is that .next()
searches the siblings, so it does not find a table
. 您的问题是.next()
搜索兄弟姐妹,因此找不到table
。 Try traversing up to the buttons parent ( span
), and then find the span's sibling table - 尝试遍历父按钮( span
),然后找到span的兄弟表 -
$(this).parent().nextAll('table:first').find('td').toggle();
updated JSFiddle - http://jsfiddle.net/JGLaa/1/ 更新JSFiddle - http://jsfiddle.net/JGLaa/1/
here is an updated JSFiddle that has multiple buttons/tables - http://jsfiddle.net/JGLaa/2/ 这是一个更新的JSFiddle,有多个按钮/表 - http://jsfiddle.net/JGLaa/2/
$(document).ready(function(){
$(".show").html("<input type='button' value='Show All' class='treebtn'>");
$('.tree').hide();
$('.treebtn ').on('click', function() {
$(this).parent('span').next('table').toggle();
if (this.value=="Show All") this.value = "Hide All";
else this.value = "Show All";
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.