1

Tenho a seguinte tabela,mais não estou sabendo usar o checkbox,como eu faço para imprimir somente os checkbox selecionados ?

E como ele esta dentro do table ele ta aparecendo na impressão,como fazer para ele não aparecer também.

<table class='datatable table table-hover table-bordered table-responsiv'>
        <input type="button" name="imprimir" value="Imprimir" onclick="window.print();">
       <thead>
         <tr>
            <th align='center'><font size=1>#</font></th>
            <th align='center'><font size=1>Chamado</font></th>
            <th align='center'><font size=1>Problema</font></th>
            <th align='center'><font size=1>Descricao</font></th>
            <th align='center'><font size=1>Contato</font></th>
            <th align='center'><font size=1>Data</font></th>
            <th align='center'><font size=1>Loja</font></th>
            <th align='center'><font size=1>Setor</font></th>
            <th align='center'><font size=1>Aberto</font></th>
            <th align='center'><font size=1>Status</font></th>
            <th align='center'><font size=1>Farol</th>
         </tr>
        </thead>
      <?php
         echo"<tbody>";   
         while ($row = mysql_fetch_array($query_pesquisa)) {
         echo" <tr>";
            echo '<td><input type="checkbox"></td>';
            echo"<td align='center'><font size=2>".$row['CHAMADO'].         "</font></td>";
            echo"<td align='center'><font size=2>".$row['PROBLEMA'].        "</font></td>";
            echo"<td align='center'><font size=2>".$row['DESCRICAO'].       "</font></td>";
            echo"<td align='center'><font size=2>".$row['CONTATO'].         "</font></td>";
            echo"<td align='center'><font size=2>".$row['DATA_DE_ABERTURA']."</font></td>";
            echo"<td align='center'><font size=2>".$row['UNIDADE'].         "</font></td>";
            echo"<td align='center'><font size=2>".$row['SETOR'].           "</font></td>";
            echo"<td align='center'><font size=2>".$row['ABERTO_POR'].      "</font></td>";
            echo"<td align='center'><font size=2>".$row['STATUS'].          "</font></td>";
         if($row['HORAS_EM_ABERTO'] <= 48) { 
            echo "<td><img src='verde.png'></td>"; 
         } elseif($row['HORAS_EM_ABERTO'] <= 96) { 
            echo "<td><img src='laranja.png'></td>"; 
         } elseif($row['HORAS_EM_ABERTO'] >= 97) { 
            echo "<td><img src='vermelho.png'></td>";
         } else{ 
            echo "<td><img src='vazio.png'></td>";
         };

         echo" </tr>";

       }   
      echo"  </tbody>";
     echo" </table>";

    ?>

    <script type="text/javascript"> 
            $(document).ready(function() {
                $('.datatable').dataTable({
                    "sPaginationType": "bs_full"
                }); 
                $('.datatable').each(function(){
                    var datatable = $(this);
                    // SEARCH - Add the placeholder for Search and Turn this into in-line form control
                    var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
                    search_input.attr('placeholder', 'Search');
                    search_input.addClass('form-control input-sm');
                    // LENGTH - Inline-Form control
                    var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
                    length_sel.addClass('form-control input-sm');
                });
            });

            </script>    

1 Resposta 1

2

Você pode criar uma função para selecionar todas as linhas que não estão selecionadas, adicionar uma classe e com o @media print ocultá-las.

Fiz um exemplo abaixo:


document.querySelector("button").addEventListener("click", function() {
  const allCheckedInputs = document.querySelectorAll("input");

  for(let i=0; i < allCheckedInputs.length; i++) {
    if (allCheckedInputs[i].checked) {
      allCheckedInputs[i].parentNode.parentNode.classList.add("visible-when-printing")
    }
  }
});
@media print {
  table tr { display: none; }
  table tr.visible-when-printing { display: table-row; }
}
<table>
  <tr>
    <td>
      <input type="checkbox" id="item-1" name="inputCheckbox">
     </td>
     <td>
      <label for="item-1">Item 1</label>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="item-2" name="inputCheckbox">
     </td>
     <td>
      <label for="item-2">Item 2</label>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="item-3" name="inputCheckbox">
     </td>
     <td>
      <label for="item-3">Item 3</label>
    </td>
  </tr>
</table>

<button>
  Preparar para impressão
</button>
2
  • Somente informando o link esta quebrado, poderia adicionar a sua resposta o código para poder-mos ajudar mais pessoas. Commented 28/05/2019 às 20:55
  • Obrigado @OtácioBarbosa, já subi outro link com outro exemplo
    – Kiss
    Commented 29/05/2019 às 14:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .