-1

次のスクリプトを使用して、html テーブルの各行にアコーディオンを作成しようとしています

HTML

<table class="list" id="table" data-bind="visible: !loading()">
    @*<table class="productTable" data-bind="sortTable:true">*@
    <thead>

        <tr>
            <th>Product</th>
            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>

            <th>Bid</th>
            <th>Offer</th>
            <th>Offer Volume</th>
            <th>Offer C/P</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </thead>
    <tbody data-bind="foreach: canadiancrudes" >
        <tr class="accordion">
            <td data-bind="text:Product"></td>
        </tr>

               <tr class="" data-bind="template: { name: $root.displayMode, data: $data }"></tr>


    </tbody>
</table>

2.ジャバスクリプト

$(function () {
        var $list = $('.list');
        $list.find("tr").not('.accordion').hide();
        $list.find("tr").eq(0).show();
        $list.find(".accordion").click(function () {
            $(this).fadeTo("fast", 1);
            $list.find('.accordion').not(this).siblings().fadeOut(500);
            $(this).siblings().fadeToggle(500);
            $(this).addClass('active');
            $list.find('.accordion').not(this).removeClass('active');
            $list.find('.accordion').not(this).css("opacity", 0.33);
            $list.find('.accordion').not(this).hover(function () {
                $(this).fadeTo("fast", 1);
            },
                function () {
                    $(this).fadeTo("fast", 0.33);
                });
        });
    });

CSS

#table tbody .accordion:hover td:first-child, #table tbody .accordion.active td:first-child{ 
    border-left:3px solid #000; float:left;  overflow: hidden; padding-left: 5px; width:100%;
            }
.active{opacity:1!important;}
#table tbody tr td{
    background-color:#ccc;
}

理由により、私のアコーディオンは上記のコードでは機能しません。どこで間違いを犯しているのか正確にわかるかもしれません。

4

2 に答える 2

0

タグを使用して自分で取得しました。ただし、SignalRとはあまり友好的ではありません。コードは次のとおりです

<table class="list" id="table" data-bind="visible: !loading()">

    <thead>

        <tr>

            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>

            <th>Bid</th>
            <th>Offer</th>
            <th>Offer Volume</th>
            <th>Offer C/P</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </thead>
      <!--ko foreach: canadiancrudes-->
    <tbody class="" >
        <tr class="accordion">
            <td colspan="14" data-bind="text:Product"></td>
        </tr>

               <tr class=""  data-bind="template: { name: $root.displayMode, data: $data }"></tr>


    </tbody>
    <!--/ko-->

    <tfoot>
        <tr>

            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>

            <th>Bid</th>
            <th>Offer</th>
            <th>Offer Volume</th>
            <th>Offer C/P</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </tfoot>
</table>
于 2013-11-06T19:33:00.817 に答える
-1

リストまたはdivに変換する必要があるテーブル行を非表示にして表示することはできません。

于 2013-10-31T15:23:31.243 に答える