javascript - 当我点击打印按钮时隐藏 <td>

Question

现在我有一个打印按钮。当我单击“打印”按钮时，隐藏现有列的内容并显示另一个内容。每个列都有不同的内容。

代码

 <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();
})

Answer 1

利用 media="print"。当您要打印页面时，将应用此样式表。您可以通过添加 display:none 来隐藏您的 TD。

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

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