如何从网页打印特定的表格

Question

请查看附带的截图

当我点击打印按钮时，我只想打印那个显示设计的盒子。 贝娄是我的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>

Answer 1

按下打印链接时，您可以隐藏所有表格，然后仅显示从中触发打印事件的表格。

这是一个使用jQuery和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();
        }
    });
});

Answer 2

您可以在差异模式（屏幕/打印）上引用css，然后在print的css上显示：none

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