Print a table tag with js

Question

I'm trying to print a table but it captures the whole page and in mobile mode, I would like to just print the addr-table class as below:

HTML

<table class="addr-table">

 ... table content...

</table>
<a href="#" class="js-print-link">Print</a>

JS

<script>

    $('.js-print-link').on('click', function() {
      var printBlock = $(this).parents('.addr-table').siblings('.addr-table');
      printBlock.hide();
      window.print();
      printBlock.show();
    });      
</script>

I tried many formats including suggestions on SO, this code performed the best, now the last huddle. How can I capture just the table in normal pc mode not mobile mode

Does this answer your question? [How do I hide an element when printing a web page?](https://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page) — Lucky Soni, Oct 04 '20 at 12:31
Yes! it does hide the other elements, how do I print in pc mode? — quba, Oct 04 '20 at 12:41
you can do it without Javascript ... I answerd to your question. — Mehrzad Tejareh, Oct 04 '20 at 13:03

Mehrzad Tejareh · Accepted Answer · 2020-10-04T13:00:57.603

2

please try it ... it works correctly:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
    @media print {
         *{visibility:hidden}
         .printable,.printable *{
            visibility:visible
         }
      }
    </style>
</head>
<body>
    <div>
        this content is not printable
    </div>
    <table class="printable">
        <tr>
            <td>
                ... table content...
            </td>
        </tr>
    </table>
    <a href="#" class="js-print-link" onclick="print()">Print</a>
</body>
</html>

edited Oct 04 '20 at 13:00

answered Oct 04 '20 at 12:42

Mehrzad Tejareh

635
5
21

1

Yes it shows content but in mobile mode, how do I print in pc mode? If you want I can accept this answer and open a new question – quba Oct 04 '20 at 13:07
I think its better open a new question and accept this answer. because it's two different issues. – Mehrzad Tejareh Oct 04 '20 at 13:09
please comment here your new question URL. thnx a lot. – Mehrzad Tejareh Oct 04 '20 at 13:11
Ok have to wait for 90 mins to post again – quba Oct 04 '20 at 13:17
https://stackoverflow.com/questions/64195954/js-print-opens-in-only-mobile-mode-how-to-print-in-pc-mode – quba Oct 04 '20 at 14:37

Print a table tag with js

1 Answers1