具有動態值的可摺疊數據行

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屬性很難將每行分配給特定的數據源。

所以......我怎麼才能讓這段代碼只顯示我點擊過的那一行數據，例如5月，並顯示這個給定月份的所有讀數，同時所有其他標題行保持關閉狀態？

謝謝！

Answer 1

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