CODEWITHSUNDEEP
phpjavascriptjquery
Rash
Rash

Reputation: 896

how to print specific table from web page

please check attached screenshot My output is displaying like this

I want to print only that box with design as it is displaying, when I clicked on print button. Bellow is my HTML and code

<table width="100%">
  <tr>
    <td align="center"><table width="590" class="label">
        <tr>
          <td><table width="550" border="1" id="print_div<?php echo  $pr; ?>">
              <tr>
                <td width="150" class="shipp_td" height="222">

                <div class="shipping_address" id="shipping_address"> <b> <?php echo $row['shipfirstname']; ?> &nbsp; <?php echo $row['shiplastname']; ?><br />
                    <?php echo $row['shipaddress1']; ?><br />
                    <?php echo $row['shipcity']; ?>,<?php echo $row['shipstate']; ?>,<br />
                    <?php echo $row['shippostalcode']; ?><br />
                    <?php echo $row['shipcountry']; ?><br />
                    <?php echo $row['shipphonenumber']; ?><br />
                    <?php echo $row['emailaddress']; ?> </b> </div></td>
                <td class="product_info"><!--<div class="order_id"><?php //echo $row['orderid']; ?></div>-->

                  <div class="product_name" id="product_name"><?php echo $row['productname']; ?></div>
                  <div class="option_name" id="option_name">
                    <?php
            $nicotine = $array1['Nicotine Level'];
             $nic = str_replace('Nicotine', 'Nic', $nicotine);
             echo $nic;
            //echo $row['options']; ?>
                  </div></td>
              </tr>
            </table></td>
          <td class="print_td"><a href="javascript:void(0)"  onclick="printContent('print_div<?php echo  $pr; ?>')">Print</a></td>
        </tr>
      </table></td>
  </tr>
</table>

Upvotes: 1

Views: 8842

Answers (2)

Martin Tale
Martin Tale

Reputation: 907

When Print link is pressed you can hide all tables and then show only the one from which the print event was fired from.

Here is an example using jQuery and CSS: JSFiddle

CSS:

@media print
{
    .print-hidden {
        display: none;
    }

    a {
        display: none;
    }
}

JavaScript:

$(function() {
    $("table a").click(function (){
        $("body > table").addClass("print-hidden");
        $(this).parents("table").last().removeClass("print-hidden");
        if (window.print) {
            window.print();
        }
    });
});

Upvotes: 2

sheauren
sheauren

Reputation: 96

you can reference css on difference mode(screen/print)，then display:none on print's css 

<link type="text/css" media="screen" rel="stylesheet" href="normal.css"/>
<link type="text/css" media="print" rel="stylesheet" href="print.css"/>

Upvotes: 1

Related Questions