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

时间：2017-02-04 10:43:26

标签： javascript jquery

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

请帮助

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;
        }
      });

    });
<!DOCTYPE html>
<html>

<head>
 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<body>
  
<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>

1 个答案:

答案 0 :(得分：0)

选中此项我添加一个代码来删除克隆表的标题： - 

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();

        //cloned_table.find('thead').remove();

        $('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");
            //Edit?????????
            table_to_split.after(div_pageBreaker, cloned_table);


          }
        }

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

  });
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>

  <body>

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

</html>

希望这可以解决您的问题

这是一个完整的Demo

相关问题
最新问题