jqueryドロップダウンテーブル行

Question

テーブルのドロップダウントーラーを作成しようとしています。主な目的は、メイン行をクリックしてからそのサブ行を消さなければならない場合です。

問題は、セレクタに変数を挿入しても機能しないことです。ここ

は同様のテーブルです：

 <table border="1">  
     <thead> 
      <tr class="btn-info"> 
       <th>header</th> 
       <th>header</th> 
      </tr> 
      </thead> 
      <tr id="main1" class="bg-primary"> 
       <td>maintext1</td> 
       <td>maintext1</td> 
      </tr> 
      <tr name="toggletext1" class="bg-info"> 
       <td>subtext1</td> 
       <td>subtext1</td> 
      </tr> 
      <tr name="toggletext1" class="bg-info"> 
       <td>subtext1</td> 
       <td>subtext1</td> 
      </tr> 
      <tr id="main2" class="bg-primary"> 
       <td>maintext2</td> 
       <td>maintext2</td> 
      </tr> 
      <tr name="toggletext2" class="bg-info"> 
       <td>subtext2</td> 
       <td>subtext2</td> 
      </tr> 
      <tr name="toggletext2" class="bg-info"> 
       <td>subtext2</td> 
       <td>subtext2</td> 
      </tr> 
     </table> 

とスクリプト：

<script>   
     $(document).ready(function(){ 
      for (x=1;x<=500;x++){ 
       $('#main'+x).on('click', function() { 
        $("tr[name=toggletext"+x+"]").slideToggle();  
       }); 
      } 
     });  
     </script> 

私のようなスクリプトを変更した場合：

$("tr[name=toggletext1]").slideToggle(); 

、それが働いたが、明らかにだけさ「toggletext1」という名前の行が切り替わります。たとえ私がid = 2のメインをクリックしても、

任意のヘルプは充当されます

Answer 1

はこれを試してみてください;）

$(document).ready(function() { 
 
    $('.bg-primary').on('click', function() { 
 
    $('.' + $(this).attr('id')).slideToggle(); 
 
    }).css('cursor', 'pointer'); 
 
});

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1"> 
 
    <thead> 
 
    <tr class="btn-info"> 
 
     <th>header</th> 
 
     <th>header</th> 
 
    </tr> 
 
    </thead> 
 
    <tr id="main1" class="bg-primary"> 
 
    <td>maintext1</td> 
 
    <td>maintext1</td> 
 
    </tr> 
 
    <tr class="bg-info main1 hide"> 
 
    <td>subtext1</td> 
 
    <td>subtext1</td> 
 
    </tr> 
 
    <tr class="bg-info main1 hide"> 
 
    <td>subtext1</td> 
 
    <td>subtext1</td> 
 
    </tr> 
 
    <tr id="main2" class="bg-primary"> 
 
    <td>maintext2</td> 
 
    <td>maintext2</td> 
 
    </tr> 
 
    <tr name="toggletext2" class="bg-info main2 hide"> 
 
    <td>subtext2</td> 
 
    <td>subtext2</td> 
 
    </tr> 
 
    <tr name="" class="bg-info main2 hide"> 
 
    <td>subtext2</td> 
 
    <td>subtext2</td> 
 
    </tr> 
 
</table>

Answer 2

okです。ごめんなさい。私の間違い。ここのforループは役に立たない。私はなぜそれを使ったのか分からない。 ここで構造全体を変更する必要があります。だから私はメインの行をクリックすると、私はそのIDの番号を取得する必要が（または多分私はIDの番号のみを使用します） とtoggletext + ID番号の名前をトグルする必要がありますすべてのsubrows。

私の間違い。ごめんなさい。

Answer 3

OK。私はそれを仕事にしました。

<script>   
     $(document).ready(function(){ 
      //when a tr is clicked 
      $("tr").on('click', function() { 
       //get the id of the tr     
       var id = $(this).attr('id'); 
       //toggle the subrows with the name + id 
       $("tr[name=toggletext"+id+"]").slideToggle(); 
      }); 
     }); 
     </script> 

私はちょうど右クリックし、他の行の一部の行を切り替えたい？（1,2、...）