0


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";
}
4

1 に答える 1

0

#report tr.oddで_

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

すべての奇数行に一致します。次のようなクリックされた行のみを選択する必要があります

 $('#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>、私は上記のコードを更新しました。

于 2012-12-29T22:31:16.030 に答える