zoukankan      html  css  js  c++  java
  • html上table的分页打印

    <script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" language="javascript">
    //按照行数进行分页
    function printTable(ro) {
    var row = 18; //默认分页18行,demo中参数是3行
    if (ro != undefined) {
    row = ro;
    }
    var $tbl = $('table.printTable');
    var $tableparent = $tbl.parent();
    var $thead = $tbl.find('thead');
    // var $tfoot = $tbl.find('tfoot');
    var $tbody = $tbl.find('tbody');
    var $tbodyTr = $tbody.children();
    var $clonefirstTr = $tbodyTr.first().clone();
    $clonefirstTr.children().each(function () {
    $(this).html(' ');
    })
    //打空白行
    var tbodyTrlength = $tbodyTr.length;
    var addrow = 0;
    var remainder = tbodyTrlength % row;
    var nulltr = "";
    if (remainder != 0) {
    addrow = row - remainder;
    for (var i = 0; i < addrow; i++) {
    nulltr += $clonefirstTr[0].outerHTML;
    }
    }
    $tbody.append(nulltr); //空白行加入到文档
    //再一次获取所有的tr行
    $tbodyTr = $tbody.children();
    //清空tbody
    $tbody.children().remove();
    //再获取整个表格(此时的表格tbody已经没东西了,这样解释是不是有点啰嗦了?)
    $tbl = $('table.printTable');
    //创建一个文档碎片(这里没有用文档碎片了,jQuery操作字符串更简单)
    var fragment = '';
    //给表格加18行tr(主体内容)
    tbodyTrlength = $tbodyTr.length;
    var trFG = '';
    for (var i = 0; i < tbodyTrlength; i++) {
    trFG += $tbodyTr.eq(i)[0].outerHTML;
    if ((i + 1) % row == 0) {
    var clonetbl = $tbl.clone(); //克隆一个表格
    clonetbl.find("tbody").append(trFG); //在表格的body中加入内容
    fragment += clonetbl[0].outerHTML + "<div style='page-break-after:always;' ><br/></div>"; //把表格加入文档碎片中
    trFG = '';
    }
    }
    $tbl.before(fragment);
    $tbl.remove();
    
    preview(1);
    }
    
    //进行预览打印
    function preview(oper) {
    if (oper < 10) {
    bdhtml = window.document.body.innerHTML; //获取当前页的html代码
    sprnstr = "<!--startprint" + oper + "-->"; //设置打印开始区域
    eprnstr = "<!--endprint" + oper + "-->"; //设置打印结束区域
    prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html
    prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //从结束代码向前取html
    window.document.body.innerHTML = prnhtml;
    window.print();
    window.document.body.innerHTML = bdhtml;
    } else {
    window.print();
    }
    }
    </script>
    <style>
    table tr
    {
    height: 50px;
    }
    table tr th
    {
    font-size: 14px;
    }
    </style>
    <h2><input title="打印1" onclick="preview(1)" type="button" name="button_export" value="打印1" /> <!--startprint1--></h2>
    <table style="min- 900px;" border="1" cellspacing="0" cellpadding="0">
    <tbody>
    <tr align="center"><th style="font-size: 18px;" colspan="8"> </th></tr>
    <tr align="center"><th style="font-size: 16px;" colspan="8"> </th></tr>
    <tr><th> </th><th colspan="7" align="left">
    @for (int a = 1; a <= 3; a++)
     { <input type="checkbox" value="@a" checked="checked" />@a }
    </th></tr>
    </tbody>
    </table>
    <div style="page-break-after: always;"> </div>
    <h2>@*强制分页*@ <input onclick="printTable(10)" type="button" value="打印table分页" /></h2>
    <p>@for (int i = 1; i <= 30; i++) {}</p>
    <table class="printTable" style="min- 900px; empty-cells: show;" border="1" cellspacing="0" cellpadding="0">
    <thead>
    <tr><th> </th><th> </th><th> </th></tr>
    </thead>
    <tbody>

    @for (int i = 1; i <= 30; i++){
    <tr>
    <td></td>
    <td> </td>
    <td> </td>
    </tr>
    } </tbody> </table> <!--endprint1-->

      

  • 相关阅读:
    ES6解构赋值
    ES6中的Symbol类型
    两个列表合并成字典
    python关于列表转为字典的两个小方法
    break、continue和return的使用
    进度条的实现
    md5加密
    dict字典方法
    用户相关的文件、解析以及命令的使用
    linux的根目录
  • 原文地址:https://www.cnblogs.com/luckys/p/9485372.html
Copyright © 2011-2022 走看看