expand/collapse table 的 2/3 在单击时使用 jquery

Question

我试图在单击页脚时展开和折叠 table 行的 2/3。

 <table class="planTable"> 
    <tbody> 

        <tr> 
            <th>Plan</th> 
        </tr> 

        <tr class="cartItemGroup"> 
            <td > 
            10 
            GB 
            </td> 
        </tr> 

        <tr class="cartItemGroup">
            <td > 
            300 
            MB 
            </td> 
        </tr> 

        <tr class="cartItemGroup"> 
            <td > 
            1 
            GB 
            </td> 
        </tr> 

        <tr class="cartItemGroup"> 

            <td > 
            3 
            GB 
            </td> 
        </tr> 

        <tr class="cartItemGroup"> 
            <td > 
            6 
            GB 
            </td> 
        </tr> 

        <tr class="cartItemGroup">
            <td > 
            15 
            GB 
            </td> 
        </tr> 

        <tr class="cartItemGroup"> 
            <td > 
            20 
            GB 
            </td> 
        </tr> 

        <tr class="cartItemGroup">
            <td > 
            30 
            GB 
            </td>
        </tr> 

        <tr class="cartItemGroup"> 
            <td > 
            40 
            GB 
            </td> 
        </tr> 

        <tr class="cartItemGroup"> 
            <td > 
            50 
            GB 
            </td> 
        </tr> 

    </tbody> 
    <tfoot>
        <tr> 
            <td>  
                <a class="toggle planSection dBlock more-less collapseImg" href="javascript:void(0)"> 
                    <div> 
                        <font class="mrcLabel">Show top 3</font> 
                    </div> 
                </a> 
            </td>
        </tr>
    </tfoot>
</table>

页脚包含触发带有锚标记的事件的文本

它应该默认折叠为 "show all plans" 作为文本 & 展开后文本应自动更改为 "show top 3" 文本应保留在底部

jsfiddle

Answer 1

完全披露此解决方案使用 jQuery，但由于您使用 jQuery 标记，我认为它没问题。

我稍微更改了标记以与您的默认大小写保持一致，以避免在 JavaScript 加载时内容闪烁。

$(function () {
    var expandText = 'Show all plans',
        closeText  = 'Show top 3',
        isOpen = false,
        rowsToShowWhenCollapsed = 3,
        $rows = $('.cartItemGroup'),
        $triggerLink = $('.toggle');

    $triggerLink.on('click', function (e) {
        e.preventDefault();

        if (isOpen) {
            closeRows();
            isOpen = false;
        } else {
            openRows();  
            isOpen = true;
        }
    }); 

    function closeRows () {
       var rowArray = $rows.toArray();

        $rows.hide();

        for (var i = 0; i < rowsToShowWhenCollapsed; i++) {
            $(rowArray[i]).show();
        }

        $triggerLink.find('span').text(expandText);
    }

    function openRows () {
        $rows.show();
        $triggerLink.find('span').text(closeText);
    }

    closeRows();
});

查看此 JSFiddle 以查看代码的运行情况。

expand/collapse table 的 2/3 在单击时使用 jquery

expand/collapse 2/3 of the table using jquery when clicked

html

javascript

css

jquery

click