如何为表构建可扩展的子行(jQuery/Javascript）

请看一下我的jsfiddle工作得很好，但由于这是针对移动网站的，我的页面上的空间真的很紧，所以我想做的是在我的表中的每一行数据都有某种子行扩展。

这是我的表格，我目前有一个过滤器和一个页面加载排序，有人知道如何添加子行吗？有点像数据表是如何做到的？

https://jsfiddle.net/51Le6o06/7/

.HTML

<h1>Table sorting on page load with paging</h1>
<div class="sort_paging">
    <p>
        <input type="checkbox" class="filter-free" /> Free Handset
    </p>
    <table class="internalActivities">
        <thead>
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
                <th>head4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£364.00 upfront</span>
                    <br><span class="amount">£10.10 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£40.40 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£30.30 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£16.04 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£134.00 upfront</span>
                    <br><span class="amount">£12.19 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£120.00 upfront</span>
                    <br><span class="amount">£14.22 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£50.22 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£10.33 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£40.45 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£200.00 upfront</span>
                    <br><span class="amount">£30.84 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£16.14 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£12.10 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£14.02 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£50.88 per month</span></td>
            </tr>
        </tbody>
    </table>
    <input type="button" class="seeMoreRecords" value="More">
    <input type="button" class="seeLessRecords" value="Less">
</div>
<h2>Second table below</h2>
<div class="sort_paging">
    <p>
        <input type="checkbox" class="filter-free" /> Free Handset
    </p>
    <table class="internalActivities">
        <thead>
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
                <th>head4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£364.00 upfront</span>
                    <br><span class="amount">£10.10 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£40.40 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£30.30 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£16.04 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£134.00 upfront</span>
                    <br><span class="amount">£12.19 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£120.00 upfront</span>
                    <br><span class="amount">£14.22 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£50.22 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£10.33 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£40.45 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="handsetcost">£200.00 upfront</span>
                    <br><span class="amount">£30.84 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£16.14 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£12.10 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£14.02 per month</span></td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td><span class="free">No upfront cost</span>
                    <br><span class="amount">£50.88 per month</span></td>
            </tr>
        </tbody>
    </table>
    <input type="button" class="seeMoreRecords" value="More">
    <input type="button" class="seeLessRecords" value="Less">
</div>

jQuery

jQuery.fn.extend({
    sortPaging: function() {
        return this.each(function() {
            var container = $(this);
            var dataRows = [];
            /**
             * Create an array of all rows with its value (this assumes that the amount is always a number.
             * You should add error checking!!
             * Also assumes that all rows are data rows, and that there are no header rows. Adjust selector appropriately.
             */
            container.find('.internalActivities > tbody > tr').each(function(i, j) {
                dataRows.push({
                    'amount': parseFloat($(this).find('.amount').text().replace(/£/, "")),
                    'row': $(this)
                });
            })
            //Sort the data smallest to largest
            dataRows.sort(function(a, b) {
                return a.amount - b.amount;
            });
            //Remove existing table rows.  This assumes that everything should be deleted, adjust selector if needed :).
            container.find('.internalActivities > tbody').empty();
            //Add rows back to table in the correct order.
            dataRows.forEach(function(ele) {
                container.find('.internalActivities > tbody').append(ele.row);
            })

            var trs = container.find(".internalActivities tbody tr");
            var btnMore = container.find(".seeMoreRecords");
            var btnLess = container.find(".seeLessRecords");
            var trsLength = trs.length;
            var currentIndex = 3,
                page = 3;
            trs.hide();
            trs.slice(0, currentIndex).show();
            checkButton();
            btnMore.click(function(e) {
                e.preventDefault();
                trs.slice(currentIndex, currentIndex + page).show();
                currentIndex += page;
                checkButton();
            });
            btnLess.click(function(e) {
                e.preventDefault();
                trs.slice(currentIndex - page, currentIndex).hide();
                currentIndex -= page;
                checkButton();
            });
            function checkButton() {
                var currentLength = trs.filter("tr:visible").length;
                if (currentLength >= trsLength) {
                    btnMore.hide();
                } else {
                    btnMore.show();
                }
                if (trsLength > page && currentLength > page) {
                    btnLess.show();
                } else {
                    btnLess.hide();
                }
            }
            container.find('.filter-free').change(function() {
                var $all = container.find(".internalActivities tbody tr").hide();
                trs = this.checked ? $all.has('.free') : $all;
                trsLength = trs.length;
                trs.slice(0, page).show();
                currentIndex = page;
            });
            container.find('.filter-free').click(function() {
                container.find('.seeLessRecords').hide();
            });
        })
    }
});
$('.sort_paging').sortPaging();