Help Me February 2016

How to print the specific table column using JQuery?

I am trying to print the specific table column. For example this is the table:

|  Name  |  Address |  Contact  |  Add  | Edit | Delete |
|    jj  |     ddd  |  1234564  |   +   |   -  |   x    |

The desired scenario here is when I click the print button, the name, address and contact should only be viewed in the print preview.

|  Name  |  Address |  Contact  |
|    jj  |     ddd  |  1234564  |

Now the problem is the add, edit and delete columns are include in the print preview so how do I remove them. I tried but it doesn't work.

Here's the code for 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 be printed
        w.print();
        w.close();  
});

Here's the code for displaying the data in php and html. This data will be used for print preview:

<?php 

    echo "<div class='p'>"; //the area to be 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></t        

Answers


charlietfl February 2016

You can clone the table, manipulate rows on clone and then convert to html string

var $tableClone = $('#tableId').clone();
$tableClone.find('tr').each(function(){
    $(this).find('td:gt(2)').remove();
});
var tableHtml = $tableClone[0].outerHTML;

Note that tags <center> and <font> are deprecated in html5. Use css instead


Toastrackenigma February 2016

Quick Solution:

Try using a CSS3 Print Stylesheet: https://jsfiddle.net/jgdapgcx/1/

Edit:

OP is using jQuery to open the window, so here's how to open the window and have this 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 be printed
        w.print();
        w.close();  
});

(Note the <style>@media print{.dontprint{display:none;}}</style> on line 3).

Then all you need to do is add the class to the delete column and you should be good to go :D

How it works:

@media rules are only enacted by CSS when they fit a certain media condition. This can be used for responsive website design (change CSS rules on screen size), but also to change the design of a page for print media.

Any rules inside @media print {} (between the curly brackets) are enacted only when the document is being printed.

Here's how it works in your case:

  • We first give the delete column a unique class. It doesn't matter what this is. In this example, I'm using dontprint like so:

    ...<td class="dontprint"><center>...
    
  • We add a @media print set to our CSS file:

    @media print {
    
    }
    
  • Inside the curly brackets, we select the column with a class of dontprint. This selects that element to apply a certain set of styles to it only when we are printing:<


morteza hosseini February 2016

You can add class hide to all element must hide from print and use this code

    $(".printprint_stud").click(function(){
    $('.hide').hide();
    window.print();
    $('.hide').show();
});

or use @media css

Post Status

Asked in February 2016
Viewed 1,013 times
Voted 14
Answered 3 times

Search




Leave an answer