Insert an empty row <tr> at each size range of an html table (With Javascript)

Asked

Viewed 4,061 times

3

i have an HTML page that works as report page.

It has a table that is fed by the database, however when there are many rows in the query then the HTML table gets very large. It turns out that because of this, if I try to print the page, the last row of the table at the bottom of the page will be "food" by dividing the paper.

I would like to allow javascript to create empty lines at each height range of the table.

For example, I could specify that every 500 pixels high in the table, javascript should insert an empty row.

However, I don’t know how to deploy this.

Any suggestions?

Attempts...

<html>
    <head>
        <script src="jquery.min.js"></script>
        <script type='text/javascript'>
            $(document).ready(function(){
                var altura = 0;
                $('#tabela tr').each(function(index, element){
                    altura += $(this).height();
                    if (altura > 100) {
                        $(this).style.pageBreakBefore="always";
                        altura = 0;
                    }
                });
            });
        </script>

        <style>
            @media print {
                tr.page-break  { 
                    display: block;
                    page-break-before: always; 
                }
            }   
        </style>
    </head>

    <body>

        <table id='tabela' border=1px;>
            <tr><td>Linha1</td></tr>
            <tr><td>Linha2</td></tr>
            <tr class='page-break'><td>Linha3</td></tr>
            <tr><td>Linha4</td></tr>
            <tr><td>Linha5</td></tr>
            <tr><td>Linha6</td></tr>
            <tr><td>Linha7</td></tr>
            <tr><td>Linha8</td></tr>
            <tr><td>Linha9</td></tr>
            <tr><td>Linha10</td></tr>
            <tr><td>Linha11</td></tr>
            <tr><td>Linha12</td></tr>
            <tr><td>Linha13</td></tr>
            <tr><td>Linha14</td></tr>
            <tr><td>Linha15</td></tr>
            <tr><td>Linha16</td></tr>
            <tr><td>Linha17</td></tr>
            <tr><td>Linha18</td></tr>
            <tr><td>Linha19</td></tr>
            <tr><td>Linha20</td></tr>
            <tr><td>Linha21</td></tr>
            <tr><td>Linha22</td></tr>
            <tr><td>Linha23</td></tr>
            <tr><td>Linha24</td></tr>
            <tr><td>Linha25</td></tr>
            <tr><td>Linha26</td></tr>
            <tr><td>Linha27</td></tr>
            <tr><td>Linha28</td></tr>
            <tr><td>Linha29</td></tr>
            <tr><td>Linha30</td></tr>
            <tr><td>Linha31</td></tr>
            <tr><td>Linha32</td></tr>
            <tr><td>Linha33</td></tr>
            <tr><td>Linha34</td></tr>
            <tr><td>Linha35</td></tr>
            <tr><td>Linha36</td></tr>
            <tr><td>Linha37</td></tr>
        </table>

    </body>
</html>

And...

<html>
    <head>
        <script src="jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('td').click(function () {
                    var indice = $(this).index() + 1;
                    $('tr').each(function (index, element) {
                        $(this).children('td:nth-child(' + indice + ')').toggleClass('no-print');
                    });
                });

                var altura = 0;
                $('#tabela tr').each(function(index, element){
                    altura += $(this).height();
                    if (altura > 100) {
                        $('<tr><td colspan="' + $(this).children('td').size() + '"><span class="no-print">quebra de pagina</span></td></tr>').insertBefore($(this));
                        altura = 0;
                    }
                });

            });
        </script>

        <style>
            .no-print {
                opacity:.5;
            }
            @media print {
                .no-print {
                    display:none;
                }
            }
        </style>

    </head>

    <body>
        <table id="tabela">
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
            <tr>
                <td>Coluna 1</td>
                <td>Coluna 2</td>
                <td>Coluna 3</td>
                <td class="no-print">Coluna 4</td>
            </tr>
        </table>
    </body>
</html>
javascript html table

  • In the first example this generating an Exception: "Unable to define the indefinite or null reference 'pageBreakBefore' property" use jquery to define the class: $(this).addClass('page-break');

  • The second example copied and pasted on the fiddle, works normally...

3 answers

6


You can do with jquery, as in the example below:

jsfiddle: http://jsfiddle.net/jaderw/tfmpouse/

var altura = 0;
$('#tabela tr').each(function(index, element){
    altura += $(this).height();
    if (altura > 100) {
        $('<tr><td colspan="' + $(this).children('td').size() + '"><span class="no-print">quebra de pagina</span></td></tr>').insertBefore($(this));
        altura = 0;
    }
});

Also check a solution with CSS properties page-break-inside, page-break-after and page-break-before, I think they’re more appropriate:

Ex:

  table { page-break-inside:auto }
   tr   { page-break-inside:avoid; page-break-after:auto }

  • The code is very nice Jader, but the break only works the first time. The next time the table reaches height 100, the break does not happen. Unfortunately I could not detect the reason.

  • In the jsfiddle test works perfectly, you included all each? You set the var altura = 0 out of function for it to stay in the global scope?

  • yes! I inserted the whole structure.

  • paste all source page code into one Pastebin for me to take a look...

1

hum, and if then in js(jquery use) you do the test 

LOOP PRINCIPAL {
    while( $('table').height() < 500 ) {
        executa o codigo VB que deve conter um loop imprimindo cada linha da tabela
    }
    imprime a linha vazia

}END LOOP PRINCIPAL

  • In fact, it works like this... the client searches something in a VB6 (DESKTOP) application and then this application generates an entire HTML page filled with columns already written. That is, I have no entry code of <td><TR> inside the page. What would be interesting to me would be to read the already built table object and to insert empty lines.

  • so inside Vb is that it creates the 'table' structure with tds and tr’s to be printed? Pq if it is, maybe this type of code works in VB.

  • That’s right... but, inside Vb you can’t know how much space the table structure will occupy understood? Then this process has to occur on the HTML page.

  • I’ll edit the answer, see if it has anything to do with what you want

1

In the creation of HTML code you have no control in principle of the size of the rows in your table. What you need to do is for each row (individually or using a global CSS style) to set its height:

<table class='relatorio'>
    <tr>...</tr>
    <tr>...</tr>
</table>

And in the CSS:

.relatorio tr { height: 20px; }

With this you now know, the moment the table is being generated, what the size of each row is. With this you can keep a counter that stores the total size of the table, and when the size reaches a certain threshold, you can insert the page break.

A detail you have to pay attention to: CSS can set exactly the size of the lines on the screen, but different browsers can change the measure a bit, so adding a blank line may not be the best solution (the first / second page may even look good, but small errors can accumulate and cause problems on subsequent pages). A better solution would be to close the table and start a new table on the next page. Or use your own report generation tool.

Browser other questions tagged javascript html table

You are not signed in. Login or sign up in order to post.