Question

我已经将数据表用于表格，当我点击打印按钮时我有一个打印按钮，数据表内容必须隐藏在我打印的页面上，因为我已经通过图像显示输出

这是我的HTML代码

 <div class="wrap">
        <button type="submit" onclick="PrintDiv()"  class="btn btn-print print-button">
            <span class="glyphicon glyphicon-print"> </span>    Print</button>
    </div>
    <div id="myModalHorizontalprint"> 
        <div id="table-scroll"  class="mailbox-content">
            <table class ="table supplier-table "id="example" border="1" class="stats" cellspacing="0" style="width:100%; border:1px solid #b7b7b7;text-align:center;">   
                <thead class="table-data">
                    <tr>
                        <th class="text-center">Sl NO</th>
                        <th class="text-center">Name</th>
                        <th class="text-center">Email-id</th>
                        <th class="text-center">Phone Number</th>
                    </tr>
                </thead>
                <tbody class="table-data">
                    <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>john@example.com</td>
                    </tr>
                    <tr>
                        <td>Mary</td>
                        <td>Moe</td>
                        <td>mary@example.com</td>
                    </tr>
                    <tr>
                        <td>July</td>
                        <td>Dooley</td>
                        <td>july@example.com</td>
                    </tr>
                    <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>john@example.com</td>
                    </tr>
                    <tr>
                        <td>Mary</td>
                        <td>Moe</td>
                        <td>mary@example.com</td>
                    </tr>
                    <tr>
                        <td>July</td>
                        <td>Dooley</td>
                        <td>july@example.com</td>
                    </tr>
                    <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>john@example.com</td>
                    </tr>
                    <tr>
                        <td>Mary</td>
                        <td>Moe</td>
                        <td>mary@example.com</td>
                    </tr>
                    <tr>
                        <td>July</td>
                        <td>sandbox</td>
                        <td>july@example.com</td>
                    </tr>
                    <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>john@example.com</td>
                    </tr>
                    <tr>
                        <td>Mary</td>
                        <td>Moe</td>
                        <td>mary@example.com</td>
                    </tr>
                    <tr>
                        <td>July</td>
                        <td>Dooley</td>
                        <td>july@example.com</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

数据表脚本

 <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script>
            $(document).ready(function () {
                $('#example').DataTable({
                    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]

                });
            });

    </script>

打印按钮脚本

<script type="text/javascript">
    function PrintDiv() {
        var myModalHorizontalprint = document.getElementById('myModalHorizontalprint');
        var popupWin = window.open('', '_blank', 'left=0,top=0,width=600,height=600,status=0');
        popupWin.document.open();
        popupWin.document.write('<html><body width="100%" onload="window.print()">' + myModalHorizontalprint.innerHTML + '</html>');
        popupWin.document.close();
    }
</script>

如何在打印页面上隐藏数据表内容

0 个答案: