我的HTML：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<button class="print">Print</button>
<table id="a">
<thead>
<tr>
<th>aaaa</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel volutpat ante. Pellentesque maximus ipsum vel tempus scelerisque. Quisque vitae nunc est. Aliquam dictum magna nec quam aliquet accumsan. Suspendisse potenti. Sed dignissim pellentesque
lacus, vitae vehicula urna dignissim non. Phasellus eget odio efficitur, vehicula quam sit amet, dictum nisl. Vestibulum a sapien arcu. Nunc tristique, risus eu dignissim egestas, sem metus tincidunt odio, sed ullamcorper magna est eu sapien. Pellentesque
volutpat vestibulum porttitor.
</td>
</tr>
</tbody>
</table>
<button class="print">Print</button>
<h3 class="pag pag1"></h3>
<div class="insert"></div>
CSS：
h3.pag {
display: none;
position: absolute;
page-break-before: always;
page-break-after: always;
bottom: 0;
right: 0;
}
h3::before {
position: relative;
bottom: -15px;
}
@media print {
h3.pag {
display: initial;
}
.print {
display: none;
}
}
JS：
var bottom = 0; /* Position of first page number - 0 for bottom of first page */
var pagNum = 2; /* First sequence - Second number */
$(document).ready(function() {
/* For each 10 paragraphs, this function: clones the h3 with a new page number */
$("thead:nth-child(n)").each(function() {
bottom -= 100;
botString = bottom.toString();
var $counter = $('h3.pag1').clone().removeClass('pag1');
$counter.css("bottom", botString + "vh");
numString = pagNum.toString();
$counter.addClass("pag" + numString);
($counter).insertBefore('.insert');
pagNum = parseInt(numString);
pagNum++; /* Next number */
});
var pagTotal = $('.pag').length;
pagTotalString = pagTotal.toString();
$("h3[class^=pag]").each(function() {
/* Gets the numbers of each classes and pages */
var numId = this.className.match(/\d+/)[0];
document.styleSheets[0].addRule('h3.pag' + numId + '::before', 'content: "Page ' + numId + ' of ' + pagTotalString + '";');
});
});
我正在尝试在打印时为每个页面添加页码。如果有以下页面的标题，我希望显示页码。
目前，我只能根据<tr>来显示页码。
例如，如果基于<tr>
$("tr:nth-child(9n)")
页码将每9行增加一次。我想基于<thead>而不是<tr>。每当<thead>出现在另一个打印页面中时，我希望它增加1.我该怎么做？