Zusammenklappbare Datenzeile mit dynamischen Werten

Question

Kontext: Es gibt eine Reihe von Monaten in einer Tabelle (z. B. Mai, Juni, Juli) und unter diesen Monaten werden alle Lesungen für den angegebenen Monat sein.

Der Code:

<tbody data-bind="visible: !MeterReadingHistory_IsBusy(), foreach: HeaderLines()" style="display: none"> 
         <tr data-toggle="collapse" data-target=".order1"> 
          <td> 
           <!-- ko if: meterReadings.length > 0--> 
           <span class="glyphicon glyphicon-chevron-down"></span> 
           <span class="reading-history-data" data-bind="html: monthName"></span> 
           <!-- /ko --> 
           <!-- ko if: meterReadings.length == 0--> 
           <span class="reading-history-data" data-bind="html: monthName"></span> 
           <!-- /ko --> 
          </td> 
          <td> 
           <span class="reading-history-data" data-bind="html: latestReadingDate"></span> 
          </td> 
          <td> 
           <span class="reading-history-data" data-bind="html: latestReadingType"></span> 
          </td> 
          <td> 
           <span class="reading-history-data" data-bind="html: latestReadingElectric"></span> 
          </td> 
          <td> 
           <span class="reading-history-data" data-bind="html: latestReadingGas"></span> 
          </td> 
         </tr> 


         <!-- ko if: meterReadings.length > 0 --> 
         <tr class="collapse order1" > 
          <td colspan="5"> 

           <table class="table mb-none desktop-only"> 
            <thead> 
             <tr> 
              <th>Day</th> 
              <th>Reading Source</th> 
              <th>Electricity</th> 
              <th>Gas</th> 
             </tr> 
            </thead> 
            <tbody> 
             <!-- ko foreach: meterReadings --> 
             <tr> 
              <td data-bind="text: readingDateParsed"></td> 
              <td data-bind="html: readingType"></td> 
              <!-- ko foreach: readings --> 
              <td data-bind="html: reading"></td> 
              <!-- /ko --> 
              <!-- ko if: readings.length == 0 --> 
              <td></td> 
              <td></td> 
              <!-- /ko --> 
              <!-- ko if: readings.length == 1 --> 
              <td></td> 
              <!-- /ko --> 
             </tr> 
             <!-- /ko --> 
            </tbody> 
           </table> 
          </td> 
         </tr> 
         <!-- /ko --> 
        </tbody> 

Das Problem: Wenn ich auf eine der Zeilen klicken, dehnt es sich jeden Monat Zeile alle Daten ausgesetzt wird, wenn es in der Tat für die ich möchte nur die Unterzeilen angezeigt werden Aktueller Monat, auf den geklickt wurde.

Das Hauptproblem besteht darin, dass diese Tabelle dynamisch ist und wir nicht wissen, wie viele Kopfzeilen erzeugt werden. Daher wird es schwierig sein, jede Zeile über das Datenbindungsattribut einer bestimmten Datenquelle zuzuordnen.

Also ...... wie kann ich diesen Code erhalten, um nur die Datenzeile anzuzeigen, auf die ich geklickt habe, z. Kann, und alle Anzeigen für diesen gegebenen Monat anzeigen, während alle anderen Headerzeilen geschlossen bleiben?

Danke!

Answer 1

$([data-toggle="collapse"]).on('click',function(){ 
    var thisCollapse = $(this).attr('data-target'); 
    $(thisCollapse).slideToggle('slow'); 
})