在 ajax 成功后在单独的页面中打印每个循环记录

Question

如何在单独的页面中打印循环的每条记录，同时通过ajax和PHP数组获取数据。 IE 我希望每个页面都有 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>

JSFIDDLE of current output

Answer 1

参见此示例 https://jsfiddle.net/qa9wcuft/ there is a break made in a div. It works at least in chrome Version 64.0.3282.167 and Firefox V 61.0.1. The problem is this: https://jsfiddle.net/rz3896se/ it works in firefox but not in chrome. It seems that chrome does not break tables. So my recommendation is to do different tables and put a div in the middle with a break, like this https://jsfiddle.net/8L201zvw/。

您还添加了此内容：.Break { page-break-after: always }（.break 更好），这对于分隔页面是正确的，但是您没有任何包含 class 的元素。我的建议是你应该在页面中你想要的最后一个元素中添加 class="break" （都小写更好），在这种情况下，我认为是这样的：

 html = '<tr class="break">';
 html += '<td><textarea placeholder="textarea..."></textarea></td>';
 html += '</tr>';

这在 chrome 中不起作用。我的建议：

在 ajax 成功后在单独的页面中打印每个循环记录

Print every record of loop in a separate page in ajax success

javascript

printing

ajax

loops

page-break