JavaScript html Datentabelle Ausgabe

Question

Ich habe folgendes Format für eine HTML-Tabelle (ein wenig modifiziert hier posten) ...

<table class="table-style" id="tbl1"> 
    <tbody> 
     <tr> 
      <th>SBU</th> 
      <th>DEPARTMENT</th> 
      <th>TY SLS</th> 
      <th>TY BUD</th> 
     </tr> 
     <tr> 
      <td class="parent" rowspan="14">test0</td> 
      <td class="child" style="display: table-cell;">test1</td> 
      <td class="child" style="display: table-cell;">106040943</td> 
      <td class="child" style="display: table-cell;">117638617</td> 
     </tr> 
     <tr> 
      <td class="child">test2</td> 
      <td class="child">20733153</td> 
      <td class="child">22164885</td> 
     </tr> 
     <tr> 
      <td class="child">25 test3</td> 
      <td class="child">49086765</td> 
      <td class="child">53820000</td> 
     </tr> 
     <tr> 
      <td class="child">test4</td> 
      <td class="child">30627906</td> 
      <td class="child">34237662</td> 
     </tr> 
     <tr> 
      <td class="parent" rowspan="8">test5</td> 
      <td class="child">test6</td> 
      <td class="child">120112816</td> 
      <td class="child">126211000</td> 
     </tr> 
     <tr> 
      <td class="child">test7</td> 
      <td class="child">66521923</td> 
      <td class="child">78090000</td> 
     </tr> 
    </tbody> 
</table> 

ich folgende JavaScript bin mit Zeilen kollabieren, die die Klasse von 'haben Kind‘von der übergeordneten Klasse ...

<script> 
     $(document).ready(function() { 

      function getChildren($row) { 
       var children = []; 
        while ($row.next().hasClass('child')){ 
        children.push($row.next()); 
        $row = $row.next(); 
       } 
       return children; 
      } 

      $('.parent').on('click', function() { 

       var children = getChildren($(this)); 
       $.each(children, function() { 
        $(this).toggle(); 
       }) 
      }); 

     }) 
    </script> 

es ist jedoch nur die erste Zeile bekommen ... wie kann ich alle Zeilen bekommen zu kollabieren, bis ich die nächste Elternklasse erreichen?

Answer 1

Unter der Annahme, dass die tatsächlichen rowspan Werte in Ihrem Beispiel nicht korrekt sind (sie haben auch große Werte), ist dies eine Lösung sein könnte (I korrigierte diese Werte in der Probentabelle):

$(document).ready(function() { 
 
    $('.parent').on('click', function() { 
 
     var $row = $(this).parent(); 
 
     var rowspan = +$(this).attr('rowspan') || 1; 
 
     $.merge($row, $row.nextAll()).slice(0, rowspan).find('.child').toggle(); 
 
    }); 
 
});

.table-style, th, td { border: 1px solid }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table-style" id="tbl1"> 
 
    <tbody> 
 
     <tr> 
 
      <th>SBU</th> 
 
      <th>DEPARTMENT</th> 
 
      <th>TY SLS</th> 
 
      <th>TY BUD</th> 
 
     </tr> 
 
     <tr> 
 
      <td class="parent" rowspan="4">test0</td> 
 
      <td class="child" style="display: table-cell;">test1</td> 
 
      <td class="child" style="display: table-cell;">106040943</td> 
 
      <td class="child" style="display: table-cell;">117638617</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="child">test2</td> 
 
      <td class="child">20733153</td> 
 
      <td class="child">22164885</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="child">25 test3</td> 
 
      <td class="child">49086765</td> 
 
      <td class="child">53820000</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="child">test4</td> 
 
      <td class="child">30627906</td> 
 
      <td class="child">34237662</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="parent" rowspan="2">test5</td> 
 
      <td class="child">test6</td> 
 
      <td class="child">120112816</td> 
 
      <td class="child">126211000</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="child">test7</td> 
 
      <td class="child">66521923</td> 
 
      <td class="child">78090000</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

Versuchen Sie jQuery nextUntil() -Funktion. Gehen Sie in die Klasse parent und Sie erhalten die Ergebnisse, die Sie suchen.

https://api.jquery.com/nextUntil/