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

Answer 2

使用CSS @media打印查詢。

打印

適用於分頁材料和在打印預覽模式下在屏幕上查看的文檔。

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

隱藏 <td> 當我單擊打印按鈕時

問題描述

4 個解決方案

解決方案1
2 2016-01-27 11:07:26

解決方案2
0 2016-01-27 11:11:32

解決方案3
0 2016-01-27 11:13:50

解決方案4
0 2016-01-27 11:17:57

隱藏 <td> 當我單擊打印按鈕時

問題描述

4 個解決方案

解決方案1 2 2016-01-27 11:07:26

解決方案2 0 2016-01-27 11:11:32

解決方案3 0 2016-01-27 11:13:50

解決方案4 0 2016-01-27 11:17:57

解決方案1
2 2016-01-27 11:07:26

解決方案2
0 2016-01-27 11:11:32

解決方案3
0 2016-01-27 11:13:50

解決方案4
0 2016-01-27 11:17:57