Modify existing jQuery table sort+filter functions (child rows)
Question
Ok so I have this jQuery table function ( https://jsfiddle.net/51Le6o06/7/ ) which works perfectly with multiple tables on the same page.
I want to modify the table and functions (new fiddle https://jsfiddle.net/51Le6o06/16/ ) so that each row (.product-data-row) carries an information row (.product-information-row) [child row] as you can see in this 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>
Each (.product-data-row) now has a (.product-information-row) directly under it which carries information about (.product-data-row) for now in the example above it just contains duplicate information.
Carrying over the existing jQuery function/s from the earlier table/s functions the on page load function should - sort the table rows on page load by searching for the class (.amount) then rearranging the rows in ascending order so the cheapest deal (per month) is first. Which is no longer working.
There is also a filter that filters the table rows (carried over from previous table) by showing rows with class (.free) only - this is also wrong because I would like the information rows to be shown alongside the rows containing (.free).
Each (.product-information-row) is specific to it's (.product-data-row) directly above. How can I modify the jQuery to accommodate for this. And make the table function as it's predecessor does with the extra information row.
What i'm trying to do here is have hidden data for a table row which will eventually be displayed upon clicking the table row and slide downwards eventually but I can't seem to make it work sort of a child row which DataTables uses, if anyone has any alternative methods of doing this or ideas please let me know in the comments.
jQuery from predecessor (Needs Modifying to Work)
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>
1 answers
solution1
1 ACCPTED 2016-04-25 12:01:59
There are lot of open issues in your code, so quick fix took more than hour. Try to go through the code below, hope you will get some ideas (and please next time try to be more accurate with questions, maybe divide it into several questions in order to get quick and concise answers):
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>
Also on updated Fiddle ;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jquery sort & filter table
How to filter table rows with jQuery
Adding a Filter to Table With Parent/Child Rows
jQuery drag & drop table rows sort not working
Sort only few rows of table - jquery/ javascript
Jquery Passing Table Rows Between Functions
jQuery filter table rows by multiple columns
jQuery - getting table rows following a filter match
Jquery Filter table rows by multiple checkboxes
jQuery find table rows but ignore rows in child tables
Related Tags