Скрыть <td>, когда я нажимаю кнопку печати

Теперь у меня есть кнопка печати. Когда я нажимаю кнопку «Печать», скрыть существующее содержимое столбца и показать другое содержимое. Каждый столбец имеет различное содержимое.Скрыть <td>, когда я нажимаю кнопку печати

код

<button class="btn" id="print"><i class="icon-print"></i> Print</button> 

<div id="drop1" > 
<td><?php echo $detail->remarks;?></td> 
</div> 

    <div id="drop2" > 
<td> <a href="#view_popup_descriptive_index" class="btn green" title="Reason" data-toggle="modal" title="Reason">Reason 
<input name="app_id" id="AppId" class="AppId" type="hidden" value="<?php echo $detail->remarks;?>"/> 
</a> </td> 
</div>

сценарий

$("#print").on('click', function(){ 

    document.getElementById('drop2').style.display = "none"; 
    document.getElementById('drop1').style.display = "block"; 
    window.print(); 
})

источник

2016-01-27 robins

Почему вы пишете 'td' inside' div'? –

да..иты для укрытия – robins

не делаем подобный. Это будет invalide html, и я не вижу никакой 'table'' tr' здесь. –

Сделать использование средств массовой информации = "печать". Эта таблица стилей применяется, когда вы хотите распечатать свою страницу. Вы можете скрыть свои TD, добавив display:none.

<link rel="stylesheet" type="text/css" href="print.css" media="print">

http://www.w3schools.com/tags/att_link_media.asp

источник

2016-01-27 11:07:26 com2ghz

Использование CSS @media печать запроса.

print

Предназначен для выгружаемого материала и для документов, просматриваемых на экране в режиме предварительного просмотра печати.

@media print { 
    td { 
    display: none; 
    } 
}

источник

2016-01-27 11:11:32

Попробуйте добавить больше текста, чтобы это стало скорее ответом, а не просто комментарием. Возможно, объясните, почему это работает? :) –

Как кто-то заметил, отд то тд не очень хорошо HTML.

Лучший подход может быть не использовать ничего, кроме Див и используя CSS для создания таблицы, как эффект, как так:

<div class="table"> 
    <div class="row"> 
    <div class="cell" id="drop1"> 
    </div> 
    <div class="cell" id="drop2"> 
    </div> 
    </div> 
</div> 

.table { display: table; } 
.row { display: table-row; } 
.cell { display: table-cell; }

Тогда ваш HTML будет приемлемым, и вы можете продолжать с скрытия/раскрытия с помощью JQuery.

источник

2016-01-27 11:13:50 rrd

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 

<script> 
    $(document).ready(function() { 

     $("#print").on('click', function() { 

      document.getElementById('drop2').style.display = "none"; 
      document.getElementById('drop1').style.display = "block"; 
      window.print(); 
     }) 
    }); 




</script> 
</head> 
<body> 

    <button class="btn" id="print"><i class="icon-print"></i> Print</button> 

<div id="drop1" > 
<td>show</td> 
</div> 

    <div id="drop2" > 
<td> <a href="#view_popup_descriptive_index" class="btn green" title="Reason" data-toggle="modal" title="Reason">Reason 
<input name="app_id" id="AppId" class="AppId" type="hidden" value="app_id"/> 
</a> hide </td> 
</div> 


</body> 
</html>

источник

2016-01-27 11:17:57 Aswathy

Скрыть <td>, когда я нажимаю кнопку печати

ответ

Смежные вопросы