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');
})

具有动态值的可折叠数据行

1 个答案: