Introduction: In this article I am going to explain how to hide first/last or nth column using javascript/jquery i.e. any column we want to hide from table before printing or we can say in print preview mode so that they do not print on page.
In above example we have hidden 2nd column which is Middle Name. We can hide any column using nth-child(n). Here n is the index of column you want to hide. For hiding second column we passed 2 in place of n.
In previous articles I have explained CSS to hide first / last or nth column of table before printing and How to Check user name or email availability using asp.net,ajax and jquery and Difference between jquery and javascript and Check uncheck all checkboxes in asp.net gridview using jquery and Jquery to validate file type and size before uploading through asp.net fileupload control
Description: Many times we have some additional columns in table e.g. checkbox in front or last column to select specific records or there may be edit or delete buttons in the table to perform edit and delete operations.
Whenever we want to print the table data; checkboxes, edit, delete button should not be printed. Is it possible to hide these columns in print mode only without hiding it on page?
Yes, it is possible using javascript/jquery or simply
using CSS. Here in this article I am using jquery’s hide() method to hide the
unwanted column in print mode so that they do not print on the page and using
show() method column can be shown again on page.
Implementation: Let’s create an example for demonstration purpose.
<html>
<head>
<title></title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 30%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function PrintDocument(btn) {
//Hide print button
$(btn).hide();
//Hide second child i.e second column
Header
$(".employee th:nth-child(2)").hide()
//Hide second child i.e second column
$(".employee td:nth-child(2)").hide()
//Or hide column using single line
//$(".employee th:nth-child(2),
.employee td:nth-child(2)").hide();
// Open Print Preview mode to print
window.print();
//show print button again
$(btn).show();
//Or show hidden columns again
$(".employee th:nth-child(2)").show();
$(".employee td:nth-child(2)").show();
//Or show hidden column using single line
//$(".employee th:nth-child(2),
.employee td:nth-child(2)").show();
}
</script>
</head>
<body>
<table class="employee">
<tr>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jatin</td>
<td>Kumar</td>
<td>Verma</td>
<td>23</td>
</tr>
<tr>
<td>Sandeep</td>
<td>Singh</td>
<td>Dangi</td>
<td>33</td>
</tr>
<tr>
<td>Aman</td>
<td>Pal</td>
<td>Singh</td>
<td>27</td>
</tr>
</table>
<br />
<input type="button" value="Print" onclick="PrintDocument(this);">
</body>
</html>
Below is the Table Data :
On clicking Print Button :
As u can see in print preview mode 2nd column i.e. Middle Name column is hidden and it will not be printed on printing.
Hide first column of table
To hide first column we need to replace the PrintDocument() function with the function below.
function PrintDocument(btn) {
//Hide print button
$(btn).hide();
//Hide first child i.e first Header
$(".employee th:first-child").hide()
//Hide first child i.e first column
$(".employee td:first-child").hide()
//Or hide column using single line
//$(".employee th:first-child, .employee td:first-child").hide();
// Open Print Preview mode to print
window.print();
//show print button again
$(btn).show();
//Or show hidden columns again
$(".employee th:first-child").show();
$(".employee td:first-child").show();
//Or show hidden column using single line
//$(".employee th:first-child, .employee td:first-child").show();
}
Print Preview will be as:
Hide last column of table
To hide last column we need to replace the PrintDocument() function with the function below.
function PrintDocument(btn) {
//Hide print button
$(btn).hide();
//Hide last child i.e last header
$(".employee th:last-child").hide()
//Hide last child i.e last column
$(".employee td:last-child").hide()
//Or hide column using single line
//$(".employee th:last-child, .employee td:last-child").hide();
// Open Print Preview mode to print
window.print();
//show print button again
$(btn).show();
//Or show hidden columns again
$(".employee th:last-child").show();
$(".employee td:last-child").show();
//Or show hidden column using single line
//$(".employee th:last-child, .employee td:last-child").show();
}
Print Preview will be as:
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..