用于打印的jQuery多个表格行单独分页 [英] jQuery multiple tables row separate in pages for print
本文介绍了用于打印的jQuery多个表格行单独分页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
第一个表格行分开完成，然后单独启动下一个表格行，每个页面可以包含21行
任何帮助都非常感谢
jQuery lang-js prettyprint-override> < script> < / div style =page-break-before：always;>< / div style =page-break-before：always;; div（）; var per_page = 15; $（'table'）。each（function（index，element）{console.log（$（element））; //我们有多少页的行？var pages = Math .ceil（$（'tbody tr'）.length / per_page）; //如果我们只有一个页面没有更多if（pages == 1）{return;} //得到我们正在分裂的表var table_to_split = $ （element）; var current_page = 1; / /循环浏览我们的每个页面（current_page = 1; current_page< =网页; current_page ++）{//创建表的新副本var cloned_table = table_to_split.clone（）; //删除后续页面上的行$（'tbody tr'，table_to_split）.each（function（loop，row_element）{//如果我们已经达到最大值if（loop> = per_page）{//去掉行$（row_element）一个.remove（）;}}）; //循环另一个副本$（'tbody tr'，cloned_table）.each（function（loop，row_element）{//如果我们在我们当前页面之前if（loop< per_page）{//删除那个$（ row_element）卸下摆臂（）;}}）; //插入另一张表if（current_page< pages）{$（div_pageBreaker）.appendTo（'＃appendTable'）; $（cloned_table）.appendTo（＃appendTable）; } //休息一下table_to_split = cloned_table; }}）;}）;< / script>
< script src =https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js>< / script>< table> < THEAD> < TR> < td>< h4>表1< / h4>< / td> < / TR> < / THEAD> < TBODY> < TR>< TD→1< / TD>< / TR> < TR>< TD> 2'; / TD>< / TR> < TR>< TD> 3'; / TD>< / TR> < TR>< TD> 4℃; / TD>< / TR> < TR>< TD> 5℃; / TD>< / TR> < TR>< TD→6< / TD>< / TR> < TR>< TD&大于7< / TD>< / TR> < TR>< TD> 8 LT; / TD>< / TR> < TR>< TD> 9< / TD>< / TR> < TR>< TD→10< / TD>< / TR> < TR>< TD> 11< / TD>< / TR> < TR>< TD> 12< / TD>< / TR> < TR>< TD> 13< / TD>< / TR> < TR>< TD> 14< / TD>< / TR> < TR>< TD> 15℃; / TD>< / TR> < TR>< TD> 16< / TD>< / TR> < / tbody的>< /表><表> < THEAD> < TR> < td>< h4>表2< / h4>< / td> < / TR> < / THEAD> < TBODY> < TR>< TD→1< / TD>< / TR> < TR>< TD> 2'; / TD>< / TR> < TR>< TD> 3'; / TD>< / TR> < TR>< TD> 4℃; / TD>< / TR> < TR>< TD> 5℃; / TD>< / TR> < TR>< TD→6< / TD>< / TR> < TR>< TD&大于7< / TD>< / TR> < TR>< TD> 8 LT; / TD>< / TR> < TR>< TD> 9< / TD>< / TR> < TR>< TD→10< / TD>< / TR> < TR>< TD> 11< / TD>< / TR> < TR>< TD> 12< / TD>< / TR> < TR>< TD> 13< / TD>< / TR> < TR>< TD> 14< / TD>< / TR> < TR>< TD> 15℃; / TD>< / TR> < / tbody的>< /表> < div id =appendTable>< / div>
h2_lin>解决方案
这是最新的代码更新和空白页面被删除： - $ /
$ b
<！DOCTYPE html>< html><头> < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js>< / script> < link rel =stylesheethref =style.css/> < script src =script.js>< / script>< / head>< body> < script src =https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js>< / script> <表> < THEAD> < TR> < TD> < h4>表1< / h4>< / td> < / TR> < / THEAD> < TBODY> < TR> < TD→1< / TD> < / TR> < TR> < TD> 2'; / TD> < / TR> < TR> < TD> 3'; / TD> < / TR> < TR> < TD> 4℃; / TD> < / TR> < TR> < TD> 5℃; / TD> < / TR> < TR> < TD→6< / TD> < / TR> < TR> < TD&大于7< / TD> < / TR> < TR> < TD> 8 LT; / TD> < / TR> < TR> < TD> 9< / TD> < / TR> < TR> < TD→10< / TD> < / TR> < TR> < TD> 11< / TD> < / TR> < TR> < TD> 12< / TD> < / TR> < TR> < TD> 13< / TD> < / TR> < TR> < TD> 14< / TD> < / TR> < TR> < TD> 15℃; / TD> < / TR> < TR> < TD> 16< / TD> < / TR> < / tbody的> < /表> <表> < THEAD> < TR> < TD> < h4>表2< / h4>< / td> < / TR> < / THEAD> < TBODY> < TR> < TD→1< / TD> < / TR> < TR> < TD> 2'; / TD> < / TR> < TR> < TD> 3'; / TD> < / TR> < TR> < TD> 4℃; / TD> < / TR> < TR> < TD> 5℃; / TD> < / TR> < TR> < TD→6< / TD> < / TR> < TR> < TD&大于7< / TD> < / TR> < TR> < TD> 8 LT; / TD> < / TR> < TR> < TD> 9< / TD> < / TR> < TR> < TD→10< / TD> < / TR> < TR> < TD> 11< / TD> < / TR> < TR> < TD> 12< / TD> < / TR> < TR> < TD> 13< / TD> < / TR> < TR> < TD> 14< / TD> < / TR> < TR> < TD> 15℃; / TD> < / TR> < / tbody的> < /表> < div id =appendTable>< / div>< / body>< / html>
编辑：
这是一份工作演示
希望能回答您的问题。
i want to divide multiple tables row in separate pages when print. First table rows separate complete then start next table rows separate and each page can contain 21rows
Any help with this is very much appreciated
<script>
jQuery(document).ready(function()
{
for (i=0; i<document.getElementsByTagName("table").length; i++)
{
document.getElementsByTagName("table")[i].style.pageBreakBefore="always";
}
var div_pageBreaker = '<div style="page-break-before:always;"></div>';
var per_page = 15;
$('table').each(function(index, element)
{
console.log($(element));
//how many pages of rows have we got?
var pages = Math.ceil($('tbody tr').length / per_page);
//if we only have one page no more
if (pages == 1) {
return;
}
//get the table we're splutting
var table_to_split = $(element);
var current_page = 1;
//loop through each of our pages
for (current_page = 1; current_page <= pages; current_page++)
{
//make a new copy of the table
var cloned_table = table_to_split.clone();
//remove rows on later pages
$('tbody tr', table_to_split).each(function(loop, row_element) {
//if we've reached our max
if (loop >= per_page) {
//get rid of the row
$(row_element).remove();
}
});
//loop through the other copy
$('tbody tr', cloned_table).each(function(loop, row_element) {
//if we are before our current page
if (loop < per_page) {
//remove that one
$(row_element).remove();
}
});
//insert the other table afdter the copy
if (current_page < pages) {
$(div_pageBreaker).appendTo('#appendTable');
$(cloned_table).appendTo('#appendTable');
}
//make a break
table_to_split = cloned_table;
}
});
});
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<table>
<thead>
<tr>
<td><h4>Table 1</h4></td>
</tr>
</thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
<tr><td>13</td></tr>
<tr><td>14</td></tr>
<tr><td>15</td></tr>
<tr><td>16</td></tr>
</tbody>
</table>
<table>
<thead>
<tr>
<td><h4>Table 2</h4></td>
</tr>
</thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
<tr><td>13</td></tr>
<tr><td>14</td></tr>
<tr><td>15</td></tr>
</tbody>
</table>
<div id="appendTable"></div>
解决方案
this is the last code updated and blank pages are removed:-
jQuery(document).ready(function() {
for (i = 0; i < document.getElementsByTagName("table").length; i++) {
document.getElementsByTagName("table")[i].style.pageBreakBefore = "always";
}
var div_pageBreaker = '<div style="page-break-before:always;"></div>';
var per_page = 15;
$('table').each(function(index, element) {
debugger;
console.log($(element));
//how many pages of rows have we got?
//EDIT:?????????????????????????????????
var pages = Math.ceil($(element).find('tbody tr').length / per_page);
//if we only have one page no more
if (pages == 1) {
return;
}
//get the table we're splutting
var table_to_split = $(element);
var current_page = 1;
//loop through each of our pages
for (current_page = 1; current_page <= pages; current_page++) {
//make a new copy of the table
var cloned_table = table_to_split.clone();
//remove rows on later pages
$('tbody tr', table_to_split).each(function(loop, row_element) {
//if we've reached our max
if (loop >= per_page) {
//get rid of the row
$(row_element).remove();
}
});
//loop through the other copy
$('tbody tr', cloned_table).each(function(loop, row_element) {
//if we are before our current page
if (loop < per_page) {
//remove that one
$(row_element).remove();
}
});
//insert the other table afdter the copy
if (current_page < pages) {
//check here if the table has trs then append else do nothing
if (cloned_table.find('tbody tr').length > 0) {
//EDIT:?????????????????????????????????
$(div_pageBreaker).appendTo($(element));
$(cloned_table).appendTo($(element));
}
}
//make a break
table_to_split = cloned_table;
}
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<table>
<thead>
<tr>
<td>
<h4>Table 1</h4></td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
<tr>
<td>15</td>
</tr>
<tr>
<td>16</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<td>
<h4>Table 2</h4></td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
<tr>
<td>15</td>
</tr>
</tbody>
</table>
<div id="appendTable"></div>
</body>
</html>
Edit: This is a working Demo Hope this answers your Question.
这篇关于用于打印的jQuery多个表格行单独分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
