jQuery to hide first / last or nth column of table before printing

IntroductionIn 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.  


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 :

jQuery to hide first / last or nth column of table before printing

On clicking Print Button :
jQuery to hide first / last or nth column of table before printing

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.

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.


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:

jQuery to hide first / last or nth column of table before printing


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:

jQuery to hide first / last or nth column of table before printing

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.
Previous
Next Post »

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..