0

ネストされたテーブルに複数レベルのデータを設定しています。各レベルにドリルダウンしたい。どうすればこれを達成できますか? このjQueryは、ネストされたアイテムulやli他のページのアイテムに対して機能していますが、ネストされたテーブルでは機能しないようです。助言がありますか？

HTML :

<table>
   <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
   </tr>
   <tr class="dropClick">
      <td>8/2/2013</td>
      <td>$960.00</td>
      <td>$48.14</td>
      <table class="dropDown">
         <tr class="dropClick">
            <td>Data</td>
            <td>$960.00</td>
            <table class="dropDown">
               <tr>
                  <td>data</td>
                  <td>data</td>
               </tr>
               <tr>
                  <td>data</td>
                  <td>data</td>
               </tr>
            </table>
         </tr>
         <!--end dropClick-->
         <tr class="dropClick">
            <td>Data</td>
            <td>$72.56</td>
            <table class="dropDown">
               <tr>
                  <td>data</td>
                  <td>data</td>
               </tr>
               <tr>
                  <td>data</td>
                  <td>data</td>
               </tr>
            </table>
         </tr>
         <!--end dropClick-->
         <tr>
            <td>Data</td>
            <td>$873.50</td>
         </tr>
         <tr>
            <td>Data</td>
            <td>$48.14</td>
         </tr>
      </table>
   </tr>
   <!--end dropClick-->
</table>

脚本 ：

$(document).ready(function () {
    $(".dropDown").hide();

    $(".dropClick").click(function () {
        $this = $(this);
        $this.find(".dropDown").slideToggle("slow");
    });
});
4

2 に答える 2

0

私はあなたがこれを意味するかもしれないと思う

ライブデモ

$(function () {
    $(".dropDown").hide();
    $(".dropClick").on("click",function () {
        var $nextDrop = $(this).parent().find(".dropDown").first();
        $nextDrop.slideToggle("slow");
    });
});

ドロップダウンテーブルを含む行のドロップダウンクラスで修正されたhtmlを使用する

于 2013-11-13T09:14:59.673 に答える