好的，我有这个 jQuery 表函数 ( https://jsfiddle.net/51Le6o06/7/ )，它可以完美地处理同一页面上的多个表。
我想修改表和函数(new fiddle https://jsfiddle.net/51Le6o06/16/ )，以便每一行(.product-data-row)都包含一个信息行(.product-information-row)[子行]，如您所见在这个 fiddle 中。
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£364.00 upfront<br>£10.10 per month</td>
</tr>
现在每个 (.product-data-row) 的正下方都有一个 (.product-information-row)，它携带有关 (.product-data-row) 的信息，目前在上面的示例中它只包含重复信息。
从早期的表函数中继承现有的 jQuery 函数，页面加载函数应该 - 通过搜索类 (.amount) 对页面加载时的表行进行排序，然后按升序重新排列行，以便最便宜的交易(每月)是第一个。这不再起作用。
还有一个过滤器，通过仅显示具有类 (.free) 的行来过滤表行(从上一个表继承) - 这也是错误的，因为我希望信息行与包含 ( .免费)。
每个 (.product-information-row) 都特定于其正上方的 (.product-data-row)。我如何修改 jQuery 来适应这种情况。并通过额外的信息行使表格发挥其前身的功能。
我在这里想做的是隐藏表行的数据，这些数据最终将在单击表行并向下滑动时显示，但我似乎无法使其像 DataTables 的子行一样工作使用，如果有人有任何替代方法或想法，请在评论中告诉我。
来自前身的 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 = 4,
page = 4;
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();
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 class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£364.00 upfront<br>£10.10 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.40 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£30.30 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.04 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£134.00 upfront
<br>£12.19 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£120.00 upfront
<br>£14.22 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.22 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£10.33 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.45 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£200.00 upfront
<br>£30.84 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.14 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£12.10 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£14.02 per month</td>
</tr>
<tr class="product-data-row">
<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>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.88 per month</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 class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£364.00 upfront<br>£10.10 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.40 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£30.30 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.04 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£134.00 upfront
<br>£12.19 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£120.00 upfront
<br>£14.22 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.22 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£10.33 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.45 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£200.00 upfront
<br>£30.84 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.14 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£12.10 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£14.02 per month</td>
</tr>
<tr class="product-data-row">
<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>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.88 per month</td>
</tr>
</tbody>
</table>
<input type="button" class="seeMoreRecords" value="More">
<input type="button" class="seeLessRecords" value="Less">
</div>
最佳答案
您的代码中有很多 Unresolved 问题，因此快速修复需要一个多小时。尝试浏览下面的代码，希望您能得到一些想法(请下次尝试更准确地提出问题，也许将其分成几个问题，以便获得快速而简洁的答案):
jQuery.fn.sortPaging = function(options) {
var defaults = {
pageRows: 2
};
var settings = $.extend(true, defaults, options);
return this.each(function() {
var container = $(this);
var tableBody = container.find('.internalActivities > tbody');
var dataRows = [];
var currentPage = 1;
var maxPages = 1;
var buttonMore = container.find('.seeMoreRecords');
var buttonLess = container.find('.seeLessRecords');
var buttonFree = container.find('.filter-free');
var tableRows = [];
var maxFree = 0;
var filterFree = buttonFree.is(':checked');
function displayRows() {
tableBody.empty();
var displayed = 0;
$.each(dataRows, function(i, ele) {
if( !filterFree || (filterFree && ele.isFree) ) {
tableBody.append(ele.thisRow).append(ele.nextRow);
displayed++;
if( displayed >= currentPage*settings.pageRows ) {
return false;
};
};
});
tableBody.find('.product-data-row').on('click', function(e){
$(this).next().toggle();
});
};
function checkButtons() {
buttonLess.toggleClass('element_invisible', currentPage<=1);
buttonMore.toggleClass('element_invisible', filterFree ? currentPage>=maxFreePages : currentPage>=maxPages);
};
function showMore() {
currentPage++;
displayRows();
checkButtons();
};
function showLess() {
currentPage--;
displayRows();
checkButtons();
};
function changedFree() {
filterFree = buttonFree.is(':checked');
if( filterFree && currentPage>maxFreePages ) {
currentPage=maxFreePages;
};
displayRows();
checkButtons();
};
tableBody.find('.product-data-row').each(function(i, j) {
var thisRow = $(this);
var nextRow = thisRow.next();
var amount = parseFloat(thisRow.find('.amount').text().replace(/£/, ''));
var isFree = thisRow.find('.free').length;
maxFree += isFree;
dataRows.push({
amount: amount,
thisRow: thisRow,
nextRow: nextRow,
isFree: isFree
});
})
dataRows.sort(function(a, b) {
return a.amount - b.amount;
});
maxPages = Math.ceil(dataRows.length/settings.pageRows);
maxFreePages = Math.ceil(maxFree/settings.pageRows);
tableRows = tableBody.find("tr");
buttonMore.on('click', showMore);
buttonLess.on('click', showLess);
buttonFree.on('change', changedFree);
displayRows();
checkButtons();
})
};
$('.sort_paging').sortPaging();table,
tr,
td {
border: 1px solid black;
padding: 8px;
}
h1 {
font-size: 18px;
}
.element_invisible {
display: none;
}
.product-information-row {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£364.00 upfront
<br>£10.10 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.40 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£30.30 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.04 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£134.00 upfront
<br>£12.19 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£120.00 upfront
<br>£14.22 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.22 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£10.33 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.45 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£200.00 upfront
<br>£30.84 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.14 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£12.10 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£14.02 per month</td>
</tr>
<tr class="product-data-row">
<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>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.88 per month</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 class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£364.00 upfront
<br>£10.10 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.40 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£30.30 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.04 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£134.00 upfront
<br>£12.19 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£120.00 upfront
<br>£14.22 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.22 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£10.33 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.45 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">£200.00 upfront
<br>£30.84 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.14 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£12.10 per month</td>
</tr>
<tr class="product-data-row">
<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 class="product-information-row">
<td colspan="100%">No upfront cost
<br>£14.02 per month</td>
</tr>
<tr class="product-data-row">
<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>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.88 per month</td>
</tr>
</tbody>
</table>
<input type="button" class="seeMoreRecords" value="More">
<input type="button" class="seeLessRecords" value="Less">
</div>同时在 updated Fiddle ;
关于javascript - 修改现有的jQuery表排序+过滤函数(子行)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36793984/