How to Print Table Content in Document Using jQuery?

Question

How can I use jQuery to print only the table of the document?

    <!--panel-->
<div class="panel panel-primary">
    <!-- Default panel contents -->
    <div class="panel-heading">New Order
    <button class="btn btn-sm pull-right btn-default" type="submit">Print Item</button>
    </div>

    <div class="panel-body">
        <!--table-->
        <table class="table table-condensed">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
        <!--end of table-->
    </div>
</div>
<!--end of panel-->

Demo

Hi Qianyue, here is an example of what I would like to do jsfiddle.net/Behseini/b8khwnf8 As you can see I simply would like to print the new item instead of printing the whole document — Suffii
– Suffii, Commented Mar 6, 2015 at 21:39
I still don't catch what you mean. I see your new fiddle, in fact, the structure of the table don't change. So you just want to remove the style? like this : jsfiddle.net/13nh0xts/3 ? — Qianyue
– Qianyue, Commented Mar 6, 2015 at 21:52

MelArlo · Accepted Answer · 2017-06-13 17:01:27Z

1

You could try this function. Put your table in a div with a unique ID then reference it in the JQuery:

<script>function printDiv() {
                    var divName= "<DIV ID HERE>";

                     var printContents = document.getElementById(divName).innerHTML;
                     var originalContents = document.body.innerHTML;

                     document.body.innerHTML = printContents;

                     window.print();

                     document.body.innerHTML = originalContents;
                }</script>

answered Jun 13, 2017 at 17:01

MelArlo

717 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mottie · Accepted Answer · 2015-03-06 21:50:41Z

0

Try this (demo):

$(function () {
    $('button[type="submit"]').click(function () {
        var pageTitle = 'Page Title',
            stylesheet = '//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css',
            win = window.open('', 'Print', 'width=500,height=300');
        win.document.write('<html><head><title>' + pageTitle + '</title>' +
            '<link rel="stylesheet" href="' + stylesheet + '">' +
            '</head><body>' + $('.table')[0].outerHTML + '</body></html>');
        win.document.close();
        win.print();
        win.close();
        return false;
    });
});

answered Mar 6, 2015 at 21:50

Mottie

86.8k30 gold badges132 silver badges248 bronze badges

4 Comments

Mottie Over a year ago

@TomStickel Try the print widget.

Tom Stickel Over a year ago

I'm surprised that is not working either, very odd I am on home desktop with Chrome too and the dialog spawned print preview body is blank but shows a header and footer like the other one for IE

Mottie Over a year ago

Doh, I'm sorry... I did fix the problem, but it's currently only available in the master branch of the repository. I plan on a new release very soon.

Mottie Over a year ago

A new release is available. Try the demo again.

Collectives™ on Stack Overflow

How to Print Table Content in Document Using jQuery?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related