打印时，Jquery多个表行划分为单独的页面

时间：2017-02-04 08:48:50

标签： javascript jquery

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

请帮忙

＆＃13;
＆＃13; 
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;
	  
      $('.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_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).remove();
            }
          });

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

          //make a break
          table_to_split = cloned_table;
        }
      });

    });
＆＃13; 
<!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>
		<tr><th> Table 1 Head 1</th> </tr>
		<tr><th> <div>Table 1 Head 2</div></th> </tr>
		<tr><th> <div>Table 1 Head 3</div></th> </tr>
		<tr>
			<th>
				<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> Table 2 Head 1</th> </tr>
		<tr><th> <div>Table 2 Head 2</div></th> </tr>
		<tr><th> <div>Table 2 Head 3</div></th> </tr>
		<tr>
			<th>
				<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>
  <div id="appendTable"></div>
 </div>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我相信这种修改符合你的要求。

我更改了代码，因此克隆的表不会保留在原始表中。

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>

相关问题
最新问题