Zeigen und verbergen von Unterzeilen mit jQuery

Question

Ich versuche jQuery zu verwenden, um das folgende Problem zu lösen. Momentan habe ich keinen nützlichen Code zum Posten hier.

• zunächst nur die Master-Reihen (Klasse term1_master und term2_master) sollte sichtbar sein.
• Durch die „Show“ drücken verknüpfen die korrelierenden Gruppe von Zeilen sollten die Sichtbarkeit Toogle (z. B.. Drücken Show Taste in tr-classterm1_master sollten alle tr-elements besitzende Klasse term1 zeigen).
• Die Anzahl der Blöcke ist nicht fix, es kann auch term3_master, term4_master ... mit ihren Unterpunkten angezeigt werden.

Das ist meine Probe HTML Code:

<table> 
    <tr class="term1_master"> 
    <td>Master Row 1</td> 
    <td><a href="">Show</a></td> 
    </tr> 
    <tr class="term1"> 
    <td>Sub Row 1</td> 
    <td>Example</td> 
    </tr> 
    <tr class="term1"> 
    <td>Sub Row 2</td> 
    <td>Example</td> 
    </tr> 
    <tr class="term1"> 
    <td>Sub Row 3</td> 
    <td>Example</td> 
    </tr> 

    <tr class="term2_master"> 
    <td>Master Row 2</td> 
    <td><a href="">Show</a></td> 
    </tr> 
    <tr class="term2"> 
    <td>Sub Row 1</td> 
    <td>Example</td> 
    </tr> 
    <tr class="term2"> 
    <td>Sub Row 2</td> 
    <td>Example</td> 
    </tr> 
    <tr class="term2"> 
    <td>Sub Row 3</td> 
    <td>Example</td> 
    </tr> 
</table> 

Dank viel für mich zu helfen!

Answer 1

Sie müssen keine separaten Klassen verwenden, alle Master-Zeilen können eine .master-Klasse haben. Dann können Sie große nextUntil() -Methode verwenden zu bekommen, was Sie wollen:

$('a').click(function(e) { 
    e.preventDefault(); 
    if($(this).text()=='Show') { 
     $(this).closest('.master').nextUntil('.master').show(); 
     $(this).text('Hide'); 
    } 
    else { 
     $(this).closest('.master').nextUntil('.master').hide(); 
     $(this).text('Show'); 
    } 
}); 

Demo:

$('a').click(function(e) { 
 
    e.preventDefault(); 
 
    if($(this).text()=='Show') { 
 
     $(this).closest('.master').nextUntil('.master').show(); 
 
     $(this).text('Hide'); 
 
    } 
 
    else { 
 
     $(this).closest('.master').nextUntil('.master').hide(); 
 
     $(this).text('Show'); 
 
    } 
 
});

tr { 
 
    display:none; 
 
} 
 
tr.master { 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr class="master"> 
 
    <td>Master Row 1</td> 
 
    <td><a href="">Show</a></td> 
 
</tr><tr class="term1"> 
 
    <td>Sub Row 1</td> 
 
    <td>Example</td> 
 
</tr><tr class="term1"> 
 
    <td>Sub Row 2</td> 
 
    <td>Example</td> 
 
</tr><tr class="term1"> 
 
    <td>Sub Row 3</td> 
 
    <td>Example</td> 
 
</tr> 
 

 
<tr class="master"> 
 
    <td>Master Row 2</td> 
 
    <td><a href="">Show</a></td> 
 
</tr><tr class="term2"> 
 
    <td>Sub Row 1</td> 
 
    <td>Example</td> 
 
</tr><tr class="term2"> 
 
    <td>Sub Row 2</td> 
 
    <td>Example</td> 
 
</tr><tr class="term2"> 
 
    <td>Sub Row 3</td> 
 
    <td>Example</td> 
 
</tr> 
 

 
<tr class="master"> 
 
    <td>Master Row 3</td> 
 
    <td><a href="">Show</a></td> 
 
</tr><tr class="term3"> 
 
    <td>Sub Row 1</td> 
 
    <td>Example</td> 
 
</tr><tr class="term3"> 
 
    <td>Sub Row 2</td> 
 
    <td>Example</td> 
 
</tr><tr class="term3"> 
 
    <td>Sub Row 3</td> 
 
    <td>Example</td> 
 
</tr> 
 

 
</table>

Answer 2

Sie folgende Logik in relevanten Click-Handler nutzen könnten nur bestimmte zeigen gezielte Folgezeile, je nach relevanter Klasse:

$(function() { // ready handler 
    $('table a').on('click', function(e) { 
    e.preventDefault(); 
    var $tr = $(this).closest('tr'); 
    var trClass = $tr.attr('class').split('_').shift(); 
    $tr.nextAll('.' + trClass).show(); 
    }) 
}); 

-jsFiddle-

Answer 3

Folgendes sollte für den aktuellen HTML-Code funktionieren und an term3_master, term4_master ... mit ihren Unterelementen anhängen.

$(function() { 
 
$('tr').not('[class$="_master"]').hide(); 
 
    $('table a').on('click', function(e) { 
 
    e.preventDefault(); 
 
    if($(this).text() === "Show") { 
 
    $(this).text("Hide"); 
 
    var $tr = $(this).closest('tr'); 
 
    var trClass = $tr.attr('class').split('_').shift(); 
 
    $tr.nextAll('.' + trClass).show(); 
 
    } else { 
 
    $(this).text("Show") 
 
    var $tr = $(this).closest('tr'); 
 
    var trClass = $tr.attr('class').split('_').shift(); 
 
    $tr.nextAll('.' + trClass).hide(); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr class="term1_master"> 
 
    <td>Master Row 1</td> 
 
    <td><a href="#">Show</a></td> 
 
</tr><tr class="term1"> 
 
    <td>Sub Row 1</td> 
 
    <td>Example</td> 
 
</tr><tr class="term1"> 
 
    <td>Sub Row 2</td> 
 
    <td>Example</td> 
 
</tr><tr class="term1"> 
 
    <td>Sub Row 3</td> 
 
    <td>Example</td> 
 
</tr> 
 

 
<tr class="term2_master"> 
 
    <td>Master Row 2</td> 
 
    <td><a href="#">Show</a></td> 
 
</tr><tr class="term2"> 
 
    <td>Sub Row 1</td> 
 
    <td>Example</td> 
 
</tr><tr class="term2"> 
 
    <td>Sub Row 2</td> 
 
    <td>Example</td> 
 
</tr><tr class="term2"> 
 
    <td>Sub Row 3</td> 
 
    <td>Example</td> 
 
</tr> 
 
</table>