Skip to main content
2 de 2
adicionou 4921 caracteres ao conteúdo
Cleiton Ribeiro
  • 757
  • 1
  • 11
  • 25

Inserir uma linha vazia <tr> a cada intervalo de tamanho de uma tabela html (Com Javascript)

eu tenho uma página HTML que funciona como página de relatório.

Ela tem uma tabela que é alimentada pelo banco de dados, entretanto quando existem muitas linhas na consulta então a tabela HTML fica muito grande. Acontece que devido a isto, se eu tentar imprimir a página, a ultima linha da tabela no final da página vai ser "comida" pela divisão do papel.

Gostaria dentão de permitir que o javascript se encarregue de criar linhas vazia a cada intervalo de altura da tabela.

Por exemplo, eu poderia especificar que a cada 500 pixels de altura na tabela, o javascript deveria inserir uma linha vazia.

Porém, não sei como implantar isto.

Alguma sugestão?

Tentativas...

<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>

E...

<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>
Cleiton Ribeiro
  • 757
  • 1
  • 11
  • 25