php - How to print the specific table column using JQuery? -
i trying print specific table column. example table:
| name | address | contact | add | edit | delete | | jj | ddd | 1234564 | + | - | x |
the desired scenario here when click print button, name, address , contact should viewed in print preview.
| name | address | contact | | jj | ddd | 1234564 |
now problem add, edit , delete columns include in print preview how remove them. tried doesn't work.
here's code jquery print:
$('.print_stud').click(function() { w=window.open(); w.document.write('<html><head><title>requested medicines</title></head><body><center><h2>requested medicines</h2></center>') + '</body></html>'; w.document.write($('.p').html()); //to printed w.print(); w.close(); });
here's code displaying data in php , html. data used print preview:
<?php echo "<div class='p'>"; //the area printed while($test = mysqli_fetch_array($result)) { $id = $test['id']; ?> <tr> <td><font color='black'><?php echo $test['p_name'];?></font></td> <td><font color='black'><?php echo $test['date'];?></font></td> <td><font color='black'><?php echo $test['product_name'];?></font></td> <td><font color='black'><?php echo $test['drug_name'];?></font></td> <td><font color='black'>₱<?php echo number_format($test['s_price'], 2); ?></font></td> <td><font color='black'><?php echo $test['quantity'];?></font></td> <td><font color='black'>₱<?php echo number_format($test['sold'], 2); ?></font></td> <?php echo "<div class='p'>"; //the last area printed. delete column should not included ?> <td><center><a href ='del.php?&opr=delrequest&id=<?php echo $test['id'];?>' title="delete"><span style="font-size:1.4em;" class="glyphicon glyphicon-remove-sign"></span></center></a> <!--delete column---> </tr> <?php } ?>
quick solution:
try using css3 print stylesheet: https://jsfiddle.net/jgdapgcx/1/
edit:
op using jquery open window, here's how open window and have solution:
$('.print_stud').click(function() { w=window.open(); w.document.write('<html><head><style>@media print{.dontprint{display:none;}}</style><title>requested medicines</title></head><body><center><h2>requested medicines</h2></center>') + '</body></html>'; w.document.write($('.p').html()); //to printed w.print(); w.close(); });
(note <style>@media print{.dontprint{display:none;}}</style>
on line 3).
then need add class delete column , should go :d
how works:
@media
rules enacted css when fit media condition. can used responsive website design (change css rules on screen size), change design of page print media.
any rules inside @media print {}
(between curly brackets) enacted only when document being printed.
here's how works in case:
we first give delete column unique class. doesn't matter is. in example, i'm using
dontprint
so:...<td class="dontprint"><center>...
we add
@media print
set our css file:@media print { }
inside curly brackets, select column class of
dontprint
. selects element apply set of styles when printing:@media print { .dontprint { } }
finally, add
display:none
rule.dontprint
. means not displayed while document printing:@media print { .dontprint { display:none; } }
you can try in fiddle trying print it. although see bit of jsfiddle interface, note final table row not displayed in print preview.
other information:
- browser support charts
@media
Comments
Post a Comment