好的，我有这个jQuery表函数（https://jsfiddle.net/51Le6o06/7/），可以在同一页面上与多个表完美配合。
我想修改表和函数（new fiddle https://jsfiddle.net/51Le6o06/16/），以便每行（.product-data-row）都带有一个信息行（.product-information-row）[子行]可以看到这个小提琴。
void playSound(){
float transpose = -4;
float note = -1;
if (Input.GetKeyDown("a")) note = 0; // C
if (Input.GetKeyDown("s")) note = 2; // D
if (Input.GetKeyDown("d")) note = 4; // E
if (Input.GetKeyDown("f")) note = 5; // F
if (Input.GetKeyDown("g")) note = 7; // G
if (Input.GetKeyDown("h")) note = 9; // A
if (Input.GetKeyDown("j")) note = 11; // B
if (Input.GetKeyDown("k")) note = 12; // C
if (Input.GetKeyDown("l")) note = 14; // D
if (note>=0){ // if some key pressed...
audio.pitch = Mathf.Pow(2, (note+transpose)/12.0);
audio.Play();
}
每个（.product-data-row）现在直接在其下面有一个（.product-information-row），它带有关于（.product-data-row）的信息，现在在上面的示例中它只包含重复信息。
从早期的表/ s函数中继承现有的jQuery函数，页面加载函数应该 - 通过搜索类（.amount）对页面加载的表行进行排序，然后按升序重新排列行，以便最便宜的交易（每月）是第一个。哪个不再有效。
还有一个过滤器通过仅显示带有类（.free）的行来过滤表行（从前一个表继承） - 这也是错误的，因为我希望信息行显示在包含的行旁边（ 。免费）。
每个（.product-information-row）特定于上面的（.product-data-row）。如何修改jQuery以适应这种情况。并使表格的功能成为它的前身对额外信息行的作用。
我在这里尝试做的是有一个表格行的隐藏数据，最终会在点击表格行时显示并最终向下滑动，但我似乎无法使其工作类似于DataTables使用的子行，如果有人有任何替代方法或想法，请在评论中告诉我。
来自前任的jQuery（需要修改工作）
<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>
HTML
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();
答案 0 :(得分：1)
您的代码中存在许多未解决的问题，因此快速修复需要花费超过一小时的时间。尝试通过下面的代码，希望你会得到一些想法（并请下次尝试更准确地提出问题，或者将其分成几个问题，以便得到快速简洁的答案）：
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;