如何使用javascript / jQuery一次在不同页面中打印表格

Question

在这里，我需要一次在不同的页面中打印html表。 所有这些表都在同一个分区内。打印的每一页应该只有一个表，下一个表应该位于下一页。 这是我的演示代码

HTML

<div id="divTimeTables"><table>
<tbody>
    <tr><td>table1</td></tr>
    <tr><td><table id="tblTeacherTimeTable1"><thead><tr><th>TeacherName</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr></thead><tbody><tr><td>Monday</td><td>class&Sub2</td><td>class&Sub2</td><td>class&Sub2</td><td>class&Sub2</td><td>class&Sub2</td></tr><tr><td>Tuesday</td><td>class&Sub2</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr></tbody><tr><td>WednessDay</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Thursday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Friday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Friday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr></table></td></tr>
    <tr><td></td></tr>
    <tr><td>table2</td></tr>
    <tr><td><table id="tblTeacherTimeTable2"><thead><tr><th>TeacherName</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr></thead><tbody><tr><td>Monday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Tuesday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr></tbody><tr><td>WednessDay</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Thursday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Friday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Friday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr></table></td></tr>
    <tr><td></td></tr>
    </tbody>

    </table></div>
<button id="btnPrint">Print</button>

Answer 1

如果使用CSS打印，则可以仅在第一个表格的底部或要设置分页符的任何位置添加。 （只是一个选择的想法）

@media print {
    .page-break {page-break-after: initial;}
}

Answer 2

使用媒体查询

    <section>
<table id="table1">
    <tbody>
        <tr>
            <td>table1</td>
        </tr>
        <tr>
            <td>
                <table id="tblTeacherTimeTable1">
                    <thead>
                        <tr>
                            <th>TeacherName</th>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                            <th>6</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Monday</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                        </tr>
                        <tr>
                            <td>Tuesday</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                        </tr>
                    </tbody>
                    <tr>
                        <td>WednessDay</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Thursday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Friday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Friday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
    </section>
<section>
<table id="table2">
    <tbody>
        <tr>
            <td>table2</td>
        </tr>
        <tr>
            <td>
                <table id="tblTeacherTimeTable2">
                    <thead>
                        <tr>
                            <th>TeacherName</th>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                            <th>6</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Monday</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                        </tr>
                        <tr>
                            <td>Tuesday</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                        </tr>
                    </tbody>
                    <tr>
                        <td>WednessDay</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Thursday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Friday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Friday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>
    </section>

CSS：

@media print {
    section {
        height:25cm;
    }

}

jsfiddle：

http://fiddle.jshell.net/8u9r4xnb/4/show/