Question

我有一个由JavaScript创建的长表。我想知道有没有办法在每10行的表格中插入分页符。我注意到，如果它的内联样式为html行，则会丢弃分页符。我需要创建多个表吗？这是表 https://jsfiddle.net/j1pqtjtv/3/

<table align="right" border="0" cellpadding="6" cellspacing="0" class="itemsTable">
            <tbody><tr class="itemsHeader">

                <th align="left">Information</th>
                <th align="left" style="width:100px;">Price</th>
                <th align="left" style="width:200px;">price</th>


            </tr>
            </tbody><tbody id="divDataLocalStorage" style="font-size:26px;">

                <tr>

                </tr>

            <tr><td class="item"></td><td></td><td></td></tr><tr><td class="item">xx</td><td>$59.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$59.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$67.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$67.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$69.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$76.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$76.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$78.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$88.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$99.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$109.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$114.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$119.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$125.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$133.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$135.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$141.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$143.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$146.00</td><td>$50.00</td></tr><tr><td class="item">xx</td><td>$149.95</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$152.00</td><td>$100.00</td></tr><tr><td class="item">xx</td><td>$154.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$166.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$183.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$188.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$188.00</td><td>$50.00</td></tr><tr><td class="item">xx</td><td>$197.00</td><td>$100.00</td></tr><tr><td class="item">xx</td><td>$270.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$278.00</td><td>$50.00</td></tr><tr><td class="item">xx</td><td>$291.00</td><td>$100.00</td></tr><tr><td class="item">xx</td><td>$351.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$353.13</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$362.00</td><td>$50.00</td></tr><tr><td class="item">xx</td><td>$378.00</td><td>$100.00</td></tr><tr><td class="item">xx</td><td>$474.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$488.00</td><td>$50.00</td></tr><tr><td class="item">xx</td><td>$511.00</td><td>$100.00</td></tr><tr><td class="item">xx</td><td>$596.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$613.00</td><td>$50.00</td></tr><tr><td class="item">xx</td><td>$630.77</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$642.00</td><td>$100.00</td></tr><tr><td class="item">xx</td><td>$648.57</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$663.08</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$695.14</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$731.00</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$753.00</td><td>$50.00</td></tr><tr><td class="item">xx</td><td>$788.00</td><td>$100.00</td></tr><tr><td class="item">xx</td><td>$792.74</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$903.71</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$965.98</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,137.42</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,210.77</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,281.54</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,315.71</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,335.22</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,513.69</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,568.34</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,765.62</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$1,772.31</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$2,010.03</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$2,085.02</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$2,106.15</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$2,199.35</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$2,270.52</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$2,461.45</td><td>$0.00</td></tr><tr><td class="item">xxM</td><td>$2,633.85</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$2,669.63</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$2,854.25</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$3,008.51</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$3,104.62</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$3,316.92</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$3,530.77</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$6,947.69</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$10,209.63</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$11,866.15</td><td>$0.00</td></tr><tr><td class="item">xx</td><td>$13,173.85</td><td>$0.00</td></tr></tbody>
        </table>
    </div>

Answer 1

我不会在混合中引入像SELECT MAX(YEAR([OrderDate])) as Yr, MAX(MONTH([OrderDate])) as M, DAY([OrderDate]) as Day, sum(case when [OrderStatus]='0' THEN COALESCE(TableB.Price, 0.00) ELSE 0.00 END) AS 'STATUS"0"', sum(case when [OrderStatus]='1' THEN COALESCE(TableB.Price, 0.00) ELSE 0.00 END) AS 'STATUS"1"', sum(case when [OrderStatus]='2' THEN COALESCE(TableB.Price, 0.00) ELSE 0.00 END) AS 'STATUS"2"', sum(case when [OrderStatus]='4' THEN COALESCE(TableB.Price, 0.00) ELSE 0.00 END) AS 'STATUS"4"', sum(case when [OrderStatus]='8' THEN COALESCE(TableB.Price, 0.00) ELSE 0.00 END) AS 'STATUS"8"', sum(case when [OrderStatus]='9' THEN COALESCE(TableB.Price, 0.00) ELSE 0.00 END) AS 'STATUS"9"', sum(case when [OrderStatus]='S' THEN COALESCE(TableB.Price, 0.00) ELSE 0.00 END) AS 'STATUS"S"', sum(case when [OrderStatus]='*' THEN COALESCE(TableB.Price, 0.00) ELSE 0.00 END) AS 'STATUS"*"', sum(case when [OrderStatus]='/' THEN COALESCE(TableB.Price, 0.00) ELSE 0.00 END) AS 'STATUS"/"' FROM SorMaster LEFT OUTER JOIN TableB ON TableB.SalesOrder = SorMaster.SalesOrder WHERE YEAR([OrderDate]) = YEAR(GETDATE()) GROUP BY DATENAME(month,DateAdd(month,Month([OrderDate])-1,Cast('2008-01-01' AS Datetime))), DAY([OrderDate]) ORDER BY Yr DESC, M DESC, Day DESC这样的元素，因为你无法编写更多的代码来控制间隙的高度，因为当你可以只做它时它是不必要的操纵CSS来实现你想要的。您只需确保行<br>，然后执行以下JS：

display:block

您必须稍微修改选择器以满足您的需求，但基本上就是这样。

<强> [编辑]

删除var rows = document.querySelectorAll('tr'); for (var i = 0; i <= rows.length-1; i += 10 ) { rows[i].style.marginBottom = '50px'; };上的内联样式并执行CSS中的操作：

th

JS将分页符插入到长表中

1 个答案: