1

添付のスクリーンショットを確認してください私の出力はこのように表示されています

印刷ボタンをクリックしたときに、表示されているデザインでそのボックスだけを印刷したい。以下は私のHTMLとコードです

<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>
4

2 に答える 2

2

印刷リンクを押すと、すべてのテーブルを非表示にしてから、印刷イベントが発生したテーブルのみを表示できます。

jQueryと CSS を使用した例を次に示します。

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();
        }
    });
});
于 2013-08-13T10:14:33.663 に答える
1

差分モード (画面/印刷) で css を参照できます。次に、印刷の css で display:none 

<link type="text/css" media="screen" rel="stylesheet" href="normal.css"/>
<link type="text/css" media="print" rel="stylesheet" href="print.css"/>
于 2013-08-13T06:08:26.270 に答える