如何在单独的页面中打印循环的每个记录,同时通过数组中的ajax和PHP获取数据。即我想在每个页面中使用row1
数据,而row2
在单独的页面中记录每条记录。尝试以下脚本,但没有给出所需的结果。
var response = {
row1: [{group: 'Group A'}],
row2: [
{team: 'Team A', player: 'Jema', result: 43},
{team: 'Team B', player: 'Deno', result: 34},
{team: 'Team B', player: 'Niob', result: 56},
{team: 'Team B', player: 'Skion', result: 49},
],
};
$("#group").html(response.row1.group);
var cats = {};
response.row2.forEach(function(element) {
cats[element.team] = cats[element.team] || [];
cats[element.team].push(element);
});
Object.keys(cats).forEach(function(team) {
let html = '';
html = '<tr>';
html += '<td>' + team + '</td>';
html += '</tr>';
$('table').append(html);
// Loop through the results for this category
cats[team].forEach(function(element) {
var names = element.player;
var result = element.result;
html = '<tr>';
html += '<td>' + names + '</td>';
html += '<td><input type="text" value="' + result + '"></td>';
html += '</tr>';
$('table').append(html);
});
// Append the textarea at the end of the results
html = '<tr>';
html += '<td><textarea placeholder="textarea..."></textarea></td>';
html += '</tr>';
$('table').append(html);
});
var PrintThis = document.getElementById('print');
var PrintStyle = '<style type="text/css">' +
'@media print{' +
'.Break { page-break-after: always }' +
'}' +
'</style>';
PrintStyle += PrintThis.innerHTML;
myWin = window.open("");
myWin.document.write(PrintStyle);
myWin.print();
myWin.close();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div id="print">
<h1 id="group">
</h1>
<table class="table bordered">
<thead>
<th>Name</th>
<th>Result</th>
</thead>
<tbody>
</tbody>
</table>
</div>
看到这个例子https://jsfiddle.net/qa9wcuft/在div中有一个中断。它至少在Chrome版本64.0.3282.167和Firefox V 61.0.1中有效。问题是这样的:https://jsfiddle.net/rz3896se/它可以在firefox中运行但不能在chrome中运行。铬似乎不会破坏表格。所以我的建议是做不同的表并在中间放一个div休息,就像这个https://jsfiddle.net/8L201zvw/。
另外你要添加这个:.Break { page-break-after: always }
(.break
更好),这对于单独的页面是正确的,但是你没有该类的任何元素。我的建议是你应该在页面中你想要的最后一个元素中添加class="break"
(两者都是小写更好),在这种情况下,我认为是这样的:
html = '<tr class="break">';
html += '<td><textarea placeholder="textarea..."></textarea></td>';
html += '</tr>';
这在chrome中不起作用。我的建议: