[英]How to enable a tree view in php page?
我有一個mysql數據庫。 在表格中,我有一些上傳文件的條目。 我想在php頁面上顯示它。 但這些文件按一列分類。 所以我想要的是在該頁面上有類別名稱。 在每個名字前面我想要一個按鈕。 最初在頁面加載時,它不應顯示文件。 當有人點擊按鈕時,相應的類別應該展開。 但我無法做到。 我給你一個示例代碼的鏈接。 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/
編輯
這是我的示例html代碼,我正在顯示表格。 這段代碼有一些變量名稱和sql查詢不適用於此。 我在http://jsfiddle.net/JGLaa/2/找到了答案,但這不適用於此。 我不知道為什么?
<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>
看着你的代碼,下一個選擇器的使用是有缺陷的。 來自Jquery.com:
.next([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";
});
});
您的問題是.next()
搜索兄弟姐妹,因此找不到table
。 嘗試遍歷父按鈕( span
),然后找到span的兄弟表 -
$(this).parent().nextAll('table:first').find('td').toggle();
更新JSFiddle - http://jsfiddle.net/JGLaa/1/
這是一個更新的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.