jQuery的多表行分割在不同的页面时，打印

我有多个表像这些1st table 2nd table 我想在单独的页面来划分这些表行。每个页面包含15或20行，在第一个表完成分离后，第二个表将开始。这些代码在打印时要在下一页重复头文本，并将其删除。jQuery的多表行分割在不同的页面时，打印

请帮助

jQuery(document).ready(function() { 
 
     for (i = 0; i < document.getElementsByClassName("testInfoTable").length; i++) { 
 
     document.getElementsByClassName("testInfoTable")[i].style.pageBreakBefore = "always"; 
 

 
     } 
 
     var div_pageBreaker = '<div style="page-break-before:always;"></div>'; 
 
     var per_page = 15; 
 
\t 
 
     $('.testInfoTable').each(function(index, element) { 
 
     var pages = Math.ceil($(element).find('tbody tr').length/per_page); 
 

 
     if (pages == 1) { 
 
      return; 
 
     } 
 
     var table_to_split = $(element); 
 

 
     var current_page = 1; 
 
     
 
\t \t for (current_page = 1; current_page <= pages; current_page++) { 
 
      
 
\t \t var cloned_table = table_to_split.clone(); 
 
      
 
\t \t $('tbody tr', table_to_split).each(function(loop, row_element) { 
 
      
 
\t \t \t if (loop >= per_page) { 
 
       
 
\t \t \t $(row_element).remove(); 
 
      } 
 
      }); 
 

 
      
 
\t \t $('tbody tr', cloned_table).each(function(loop, row_element) { 
 
      
 
\t \t \t if (loop < per_page) { 
 
       
 
\t \t \t $(row_element).remove(); 
 
      } 
 
      }); 
 

 
      
 
\t \t if (current_page < pages) { 
 
      if (cloned_table.find('tbody tr').length > 0) { 
 
       
 
\t \t \t $(element).find(".text").html("What"); 
 
\t \t \t \t $(cloned_table).find("h4").html("What"); 
 
\t \t \t \t $(div_pageBreaker).appendTo($(element)); 
 
\t \t \t \t $(cloned_table).appendTo($(element)); 
 
\t \t \t 
 
      } 
 
      } 
 

 
      //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> 
 
<div> 
 

 
    <table class="testInfoTable"> 
 
    <thead> 
 
\t \t <tr><th> Table 1 Head 1</th> </tr> 
 
\t \t <tr><th> <div>Table 1 Head 2</div></th> </tr> 
 
\t \t <tr><th> <div>Table 1 Head 3</div></th> </tr> 
 
\t \t <tr> 
 
\t \t \t <th> 
 
\t \t \t \t <h4 class="text">Head Text : Table 1</h4> 
 
\t \t \t </th> 
 
\t \t </tr> 
 
    </thead> 
 
    <tbody> 
 
\t \t <tr><td>1</td> <td>1</td> <td>1</td></tr> 
 
\t \t <tr><td>2</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>3</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>4</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>5</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>6</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>7</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>8</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>9</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>10</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>11</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>12</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>13</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>14</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>15</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>16</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>17</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>18</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>19</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>20</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>21</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>22</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>23</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>24</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>25</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>26</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>27</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>28</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>29</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>30</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>31</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>32</td> <td>1</td> <td>1</td> </tr> 
 
\t </tbody> 
 
    </table> 
 

 
    <table class="testInfoTable"> 
 
    <thead> 
 
\t \t <tr><th> Table 2 Head 1</th> </tr> 
 
\t \t <tr><th> <div>Table 2 Head 2</div></th> </tr> 
 
\t \t <tr><th> <div>Table 2 Head 3</div></th> </tr> 
 
\t \t <tr> 
 
\t \t \t <th> 
 
\t \t \t \t <h4 class="text">Head Text : Table 2</h4> 
 
\t \t \t </th> 
 
\t \t </tr> 
 
    </thead> 
 
    <tbody> 
 
\t \t <tr><td>1</td> <td>1</td> <td>1</td></tr> 
 
\t \t <tr><td>2</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>3</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>4</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>5</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>6</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>7</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>8</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>9</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>10</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>11</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>12</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>13</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>14</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>15</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>16</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>17</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>18</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>19</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>20</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>21</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>22</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>23</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>24</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>25</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>26</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>27</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>28</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>29</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>30</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>31</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>32</td> <td>1</td> <td>1</td> </tr> 
 
\t </tbody> 
 
    </table> 
 
    <div id="appendTable"></div> 
 
</div> 
 
    </body> 
 

 
</html>

来源

2017-02-04 Luis

您正在寻找 “分页”。 – Chris

不，我正在寻找打印表格行中的页面打印 – Luis

欢迎来到堆栈溢出！我们是一个问答网站，而不是一个打码人员的服务。请解释你到目前为止尝试过的以及为什么它没有奏效。请参阅：[为什么“有人可以帮助我？”不是一个实际问题（http://meta.stackoverflow.com/q/284236） –

我相信这个修改你想要做什么。

我改变了代码，以便克隆表dont't原表内停留。

jQuery(document).ready(function() { 
 

 
    var per_page = 15; 
 

 
    $('.testInfoTable').each(function (index, element) { 
 
     var pages = Math.ceil($(element).find('tbody tr').length/per_page); 
 

 
     if (pages == 1) { 
 
      return; 
 
     } 
 
     var table_to_split = $(element); 
 

 
     var current_page = 1; 
 

 
     for (current_page = 1; current_page <= pages; current_page++) { 
 

 
      var cloned_table = $('<table><tbody>' + table_to_split.find('tbody').html() + '</tbody></table>'); 
 

 
      cloned_table.addClass("testInfoTable cloned") 
 

 
      $('tbody tr', table_to_split).each(function (loop, row_element) { 
 

 
       if (loop >= per_page) { 
 

 
        $(row_element).remove(); 
 
       } 
 
      }); 
 

 

 
      $('tr', cloned_table).each(function (loop, row_element) { 
 

 
       if (loop < per_page) { 
 

 
        $(row_element).remove(); 
 
       } 
 

 
      }); 
 

 

 
      if (current_page < pages) { 
 
      
 
       table_to_split.after(cloned_table); 
 

 
       cloned_table.width(table_to_split.width()); 
 

 
      } 
 

 
      table_to_split = cloned_table;   
 

 

 
     } 
 

 

 
    }); 
 

 

 
    $('<tr><th colspan="3"><h4 class="text">Table Head</h4></th></tr>').prependTo('table.cloned') 
 

 

 
});

table.testInfoTable { 
 
    page-break-before: always; 
 
    width: 200px; 
 
} 
 

 
table.testInfoTable td, table.testInfoTable th { 
 

 
     border: 1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="button" value="PRINT" onclick="window.print();" /> 
 

 
<table class="testInfoTable"> 
 
<thead> 
 
<tr><th colspan="3"> Table 1 Head 1</th> </tr> 
 
<tr><th colspan="3"> <div>Table 1 Head 2</div></th> </tr> 
 
<tr><th colspan="3"> <div>Table 1 Head 3</div></th> </tr> 
 
<tr> 
 
<th colspan="3"> 
 
<h4 class="text">Head Text : Table 1</h4> 
 
</th> 
 
</tr> 
 
</thead> 
 
    
 
<tbody> 
 
<tr><td>1</td> <td>1</td><td>1</td></tr> 
 
<tr><td>2</td><td>1</td><td>1</td></tr> 
 
<tr><td>3</td><td>1</td><td>1</td></tr> 
 
<tr><td>4</td><td>1</td><td>1</td></tr> 
 
<tr><td>5</td><td>1</td><td>1</td></tr> 
 
<tr><td>6</td><td>1</td><td>1</td></tr> 
 
<tr><td>7</td><td>1</td><td>1</td></tr> 
 
<tr><td>8</td><td>1</td><td>1</td></tr> 
 
<tr><td>9</td><td>1</td><td>1</td></tr> 
 
<tr><td>10</td><td>1</td><td>1</td></tr> 
 
<tr><td>11</td><td>1</td><td>1</td></tr> 
 
<tr><td>12</td><td>1</td><td>1</td></tr> 
 
<tr><td>13</td><td>1</td><td>1</td></tr> 
 
<tr><td>14</td><td>1</td><td>1</td></tr> 
 
<tr><td>15</td><td>1</td><td>1</td></tr> 
 
<tr><td>16</td><td>1</td><td>1</td></tr> 
 
<tr><td>17</td><td>1</td><td>1</td></tr> 
 
<tr><td>18</td><td>1</td><td>1</td></tr> 
 
<tr><td>19</td><td>1</td><td>1</td></tr> 
 
<tr><td>20</td><td>1</td><td>1</td></tr> 
 
<tr><td>21</td><td>1</td><td>1</td></tr> 
 
<tr><td>22</td><td>1</td><td>1</td></tr> 
 
<tr><td>23</td><td>1</td><td>1</td></tr> 
 
<tr><td>24</td><td>1</td><td>1</td></tr> 
 
<tr><td>25</td><td>1</td><td>1</td></tr> 
 
<tr><td>26</td><td>1</td><td>1</td></tr> 
 
<tr><td>27</td><td>1</td><td>1</td></tr> 
 
<tr><td>28</td><td>1</td><td>1</td></tr> 
 
<tr><td>29</td><td>1</td><td>1</td></tr> 
 
<tr><td>30</td><td>1</td><td>1</td></tr> 
 
<tr><td>31</td><td>1</td><td>1</td></tr> 
 
<tr><td>32</td><td>1</td><td>1</td></tr> 
 
</tbody> 
 
</table> 
 

 
<table class="testInfoTable"> 
 
    <thead> 
 
     <tr><th colspan="3"> Table 2 Head 1</th> </tr> 
 
     <tr><th colspan="3"> <div>Table 2 Head 2</div></th> </tr> 
 
     <tr><th colspan="3"> <div>Table 2 Head 3</div></th> </tr> 
 
     <tr> 
 
      <th colspan="3"> 
 
       <h4 class="text">Head Text : Table 2</h4> 
 
      </th> 
 
     </tr> 
 
    </thead> 
 

 
    <tbody> 
 
     <tr><td>1</td> <td>1</td><td>1</td></tr> 
 
     <tr><td>2</td><td>1</td><td>1</td></tr> 
 
     <tr><td>3</td><td>1</td><td>1</td></tr> 
 
     <tr><td>4</td><td>1</td><td>1</td></tr> 
 
     <tr><td>5</td><td>1</td><td>1</td></tr> 
 
     <tr><td>6</td><td>1</td><td>1</td></tr> 
 
     <tr><td>7</td><td>1</td><td>1</td></tr> 
 
     <tr><td>8</td><td>1</td><td>1</td></tr> 
 
     <tr><td>9</td><td>1</td><td>1</td></tr> 
 
     <tr><td>10</td><td>1</td><td>1</td></tr> 
 
     <tr><td>11</td><td>1</td><td>1</td></tr> 
 
     <tr><td>12</td><td>1</td><td>1</td></tr> 
 
     <tr><td>13</td><td>1</td><td>1</td></tr> 
 
     <tr><td>14</td><td>1</td><td>1</td></tr> 
 
     <tr><td>15</td><td>1</td><td>1</td></tr> 
 
     <tr><td>16</td><td>1</td><td>1</td></tr> 
 
     <tr><td>17</td><td>1</td><td>1</td></tr> 
 
     <tr><td>18</td><td>1</td><td>1</td></tr> 
 
     <tr><td>19</td><td>1</td><td>1</td></tr> 
 
     <tr><td>20</td><td>1</td><td>1</td></tr> 
 
     <tr><td>21</td><td>1</td><td>1</td></tr> 
 
     <tr><td>22</td><td>1</td><td>1</td></tr> 
 
     <tr><td>23</td><td>1</td><td>1</td></tr> 
 
     <tr><td>24</td><td>1</td><td>1</td></tr> 
 
     <tr><td>25</td><td>1</td><td>1</td></tr> 
 
     <tr><td>26</td><td>1</td><td>1</td></tr> 
 
     <tr><td>27</td><td>1</td><td>1</td></tr> 
 
     <tr><td>28</td><td>1</td><td>1</td></tr> 
 
     <tr><td>29</td><td>1</td><td>1</td></tr> 
 
     <tr><td>30</td><td>1</td><td>1</td></tr> 
 
     <tr><td>31</td><td>1</td><td>1</td></tr> 
 
     <tr><td>32</td><td>1</td><td>1</td></tr> 
 
    </tbody> 
 
</table>

来源

2017-02-04 09:05:40

工作与按钮的例子来打印此琴：HTTPS：//jsfiddle.net/Leon_Klaj/pnen5g3f/2/ –

更新它为什么克隆表行宽与主表行不匹配。请帮助https://jsfiddle.net/pnen5g3f/7/ – Luis

@Luis，更新完成。 https://jsfiddle.net/pnen5g3f/8/ –

jQuery的多表行分割在不同的页面时，打印

回答

相关问题