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

Answer 2

使用CSS @media打印查询。

<强> print

用于分页材料和在屏幕上查看的文档打印预览模式。

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

Answer 3

就像有人评论，div然后td不是很好的HTML。

更好的方法可能是除了div之外什么都不使用，并使用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继续你的隐藏/揭示。

Answer 4

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

单击打印按钮时隐藏

4 个答案: