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
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
Share Improve this question edited Mar 7, 2015 at 3:03 AstroCB 12.4k20 gold badges59 silver badges74 bronze badges asked Mar 6, 2015 at 21:09 SuffiiSuffii 5,78415 gold badges62 silver badges94 bronze badges 3- 1 What do you mean by "print the table of the document"? – Qianyue Commented Mar 6, 2015 at 21:33
- Hi Qianyue, here is an example of what I would like to do jsfiddle/Behseini/b8khwnf8 As you can see I simply would like to print the new item instead of printing the whole document – 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/13nh0xts/3 ? – Qianyue Commented Mar 6, 2015 at 21:52
2 Answers
Reset to default 1You 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>
Try this (demo):
$(function () {
$('button[type="submit"]').click(function () {
var pageTitle = 'Page Title',
stylesheet = '//maxcdn.bootstrapcdn./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;
});
});