Hide <td> when i click the print button
Question
Now i have a print button.When i click the Print button hide the existing column content and show another content.Each column having different contents.
code
<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>
script
$("#print").on('click', function(){
document.getElementById('drop2').style.display = "none";
document.getElementById('drop1').style.display = "block";
window.print();
})
4 answers
solution1
2 2016-01-27 11:07:26
Make use of media="print". This stylesheet is applied when you want to print your page. You can hide your TD's by adding display:none .
<link rel="stylesheet" type="text/css" href="print.css" media="print">
solution2
0 2016-01-27 11:11:32
solution3
0 2016-01-27 11:13:50
Like someone commented, div then td is not very good HTML.
A better approach might be to use nothing but div's and using CSS to create table-like effect like so:
<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; }
Then your HTML would be acceptable, and you could continue with your hiding/revealing via jQuery.
solution4
0 2016-01-27 11:17:57
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.