動的値を含む折りたたみ可能なデータ行

Question

コンテキスト：テーブルに月が設定されています（たとえば、5月、6月、7月）。その月の下に、その月のすべての読みが表示されます。

コード：

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

問題：私は、行のいずれかをクリックすると、それは実際に私だけのために、サブ行を表示する場合、データのすべてを暴露する毎月の行を拡大クリックされた実際の月。

主な問題は、このテーブルが動的であることです。ヘッダー行がいくつ生成されるかわからないため、data-bind属性を使用して特定のデータソースに各行を割り当てることは困難です。

ですが、どうすればこのコードをクリックして、クリックしたデータの行だけを表示することができますか？他のヘッダー行はすべて閉じられたまま、この月のすべての読み取り値を表示しますか？

ありがとうございます！

Answer 1

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