php - How to print the specific table column using JQuery? -

August 15, 2013

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'>&#8369;<?php echo number_format($test['s_price'], 2); ?></font></td>         <td><font color='black'><?php echo $test['quantity'];?></font></td>         <td><font color='black'>&#8369;<?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

Search This Blog

Color