jquery dropdown toggle table Zeile

Question

Ich versuche, ein Dropdown-Menü für eine Tabelle zu erstellen. Der Hauptzweck ist, wenn eine Hauptreihe angeklickt wird, dann müssen ihre Unterreihen verschwinden.

Das Problem ist, wenn ich eine Variable in den Selektor einfügen, es funktioniert nicht.

hier ist eine ähnliche Tabelle:

 <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> 

und das Skript:

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

, wenn ich das Skript wie ändern:

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

dann funktioniert es aber offensichtlich nur die Zeilen mit dem Namen "toggentext1" werden umgeschaltet. auch wenn ich mit id = 2 auf den main klicke;

jede Hilfe wäre geeignet

Answer 1

Try this;)

$(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. Es tut uns leid. mein Fehler. die for-Schleife ist hier nutzlos. Ich weiß nicht einmal, warum ich das benutzt habe. Ich muss hier die gesamte Struktur ändern. wenn ich also auf eine Hauptreihe klicke, muss ich die Nummer seiner ID bekommen (oder vielleicht verwende ich nur Zahlen für die ID) und alle Unterreihen mit dem Namen von Toggletext + die ID-Nummer müssen umschalten.

mein Fehler. Es tut uns leid.

Answer 3

ok. Ich habe es funktioniert.

<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> 

i änderte den Namen des (main1, main2) die ID (1,2, ...)