2012-12-29 61 views
0


我在我的JQuery代碼中需要一些幫助我似乎無法理解我出錯的地方。這是一個簡單的「家長」和「兒童」式可摺疊的桌子。所以首先所有的'兒童'被隱藏,如果你點擊一個它顯示全部是兒童。我的代碼存在的問題是當我點擊父母它的所有孩子都顯示在所有其他父母中。 感謝JQuery可摺疊表不工作

$(document).ready(function() { 
$("#report tr:odd").addClass("odd"); 
$("#report tr:not(.odd)").hide(); 
$("#report tr:first-child").show(); 

$('location.href').click(function() { 
    $.ajax({ 
    type : 'GET', 
    url : 'Test', 
    data : '${cat.categoryId}', 
success : function(response) { 
    $('ul').html(response); 
    $("#report tr.odd").next("tr").toggle(); 
    } 
    }); 
    }); 
}); 

JSP

<c:if test="${!empty categoryList}"> 
<table id="report"> 
    <tr> 
     <th>Category Name</th> 
    </tr> 
     <c:forEach items="${categoryList}" var="cat"> 
     <tr onclick="location.href='${cat.categoryId}'" > 
      <td>${cat.categoryName}</td> 
      <td><div class="arrow"></div></td> 
     <tr> 
      <td colspan="5"> 
      <c:forEach items="${prodList}" var="prod"> 
      <ul> 
       <li>${prod.productName}</li> 
      </ul> 
      </c:forEach> 
     </tr> 
    </c:forEach> 
</table> 
</c:if> 

控制器

@RequestMapping(value="{Id}", method = RequestMethod.GET) 
public String showProductByCatId(@PathVariable("Id") Integer Id, Model model){ 
    List<Product> prod = purchaseOrderService.listProductsByCatId(Id); 
    model.addAttribute("prodList", prod); 
    model.addAttribute("categoryList",purchaseOrderService.listCategory()); 
    return "Test"; 
} 

回答

0

#report tr.odd

$("#report tr.odd").next("tr").toggle(); 

將匹配所有奇數行,您需要選擇只有CL icked一行像這樣

$('#report tr.odd').click(function() { 
     var child = $(this).next('tr'); 

     $.ajax({ 
      type : 'GET', 
      url : 'Test', 
      data : '${cat.categoryId}', 
      success : function(response) { 
       child.find('ul').html(response); 
       child.toggle(); 
      } 
     }); 
}); 

編輯: 您需要選擇合適的<ul>還有,我已經更新上面的代碼。

+0

感謝您的回覆,現在沒有切換,所有的孩子都隱藏了。 – Zed420

+0

我真的很抱歉wazz3r這已經回到了原來的問題,顯示在所有父母點擊父母的孩子。 – Zed420

+0

我不知道你在做什麼。在JSP文件中,您已經將數據寫入行,爲什麼首先需要ajax調用? – wazz3r