作者eviliori (穿著88s的惡魔)
看板Ajax
標題[問題] 用JQuery搜尋類似樹狀結構的問題
時間Fri Jun 5 22:04:03 2009
目前著手將一個表單搜尋功能由server查詢改成client端查詢
以求減少server端的loading，但有個地方不知道怎麼改才好，
煩請板上有興趣的大大幫忙解解看。
以下是html部分：
<DIV id="myProj">
<table cellpadding='1' cellspacing='2' BGCOLOR="#C1FBBD">
<TR><TD colspan=4>
搜尋專案：<input type=text id=search>
<input type=button id=btnSearch value="查詢">
</TD></TR>
</table>
<HR>
<table id='ProjList' cellpadding='1' cellspacing='2' BGCOLOR="#C1FBBD">
<TR><TD colspan=4><font color=red>----最近的專案----</font></TD></TR>
<TR>
<td><input type=button value='IA52005080002' name='文件系統
建置' class="btnProj1">
</td>
<td bgcolor='#e7e7e7'>文件系統建置</td>
</TR>
<TR><TD colspan=4><font color=red>----部門專案----</font></TD></TR>
<TR>
<td><input type=button value='AA50200000001' name='部門事務'
class="btnProj1"></td>
<td bgcolor='#e7e7e7'>部門事務</td>
</TR>
<TR>
<td><input type=button value='AA50200000002' name='教育訓練'
class="btnProj1"></td>
<td bgcolor='#e7e7e7'>教育訓練</td>
</TR>
<TR>
<td><input type=button value='IA52005080004' class="btnProj2"></td>
<td bgcolor='#e7e7e7'>母專案</td>
</TR><TR><TD colspan=4>
<TABLE border=0 cellpadding=1 cellspacing=2 class="SubTab">
<TR>
<td width=80> </td>
<td><input type=button value='子專案1' class="btnSubProj"></td>
<td bgcolor='#e7e7e7'>AAAAA</td>
</TR>
<TR>
<td width=80> </td>
<td><input type=button value='子專案2' class="btnSubProj"></td>
<td bgcolor='#e7e7e7'>BBBBB</td>
</TR>
<TR>
<td width=80> </td>
<td><input type=button value='其他' class="btnSubProj"></td>
<td bgcolor='#e7e7e7'>其它</td>
</TR>
</TABLE>
</table>
</DIV>
<!-- JQuery script -->
<script>
$(function(){
$('table [class="SubTab"]').hide();
$(':button[class="btnProj2"]').click(function(event) {
if(this == event.target){
$(this).parent().parent().next().children()
.children().toggle();
}
});
$('
#btnSearch').click(function() {
$("
#ProjList tr").hide()
.filter(":contains('----')").show()
.end().filter(":contains('" + $('#search').val() + "')").show()
.end().filter(":has(input:button[value*='" + $('#search').val()
+"'])").show();
});
});
</script>
目前遇到的問題在於無論是button value或是 td裡的值我都可以搜尋到，
但是原來母專案這個按鈕按下後有子專案會顯示，未搜尋前按鈕正常
搜尋之後，如果母專案有被搜尋到，按下後子專案應該可顯示的部份有問題
會沒反應。
我想是搜尋之後DOM的結構已經不同所以母專案的按鈕才會失效。
有沒有搜尋之後，母專案按鈕功能仍正常的寫法呢？
想了很久但仍不得其解 = =||||
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.115.161.48
※ 編輯: eviliori 來自: 59.115.161.48 (06/05 22:12)
1F：→ TonyQ:看起來粗淺像是live binding 的問題 , 但是說真的我看不太懂 06/07 03:04
2F：→ TonyQ:確實的問題. 搜尋是怎麼個搜尋法 o_o 06/07 03:04
3F：→ eviliori:也許是我描述的不好，但把code貼成html加上jQuery.js 06/11 00:15
4F：→ eviliori:去跑應該可以知道問題 06/11 00:15
5F：→ eviliori:結果在 $('#btnSearch').click 裡加上把子專案的那一行過 06/11 00:16
6F：→ eviliori:濾就可以了 show()的用法只是把該選擇的集合恢復原樣 06/11 00:17
7F：→ eviliori:之前沒把show()這用法搞懂～ 06/11 00:18