There is a button

<a href='#' id='print'><span class='glyphicon glyphicon-print'></span></a>

Please tell me how to make it so that when you click on this button, the printing of the entire tag table begins. There can be as many data as you like, from 10 to 1000. I really hope for your help!

    2 answers 2

    My favorite way to print any element is as simple as a stool.

    The plan is:

    1. On the fly, create a copy of the element in the DOM
    2. Paste it into a specially prepared section in the root of the document
    3. Hide everything in the root except it
    4. We print the visible contents of the window: window.print()
    5. Restore visibility, clean up a copy

     function printById(id) { var el = document.getElementById(id); if (!el) return; var elCopy = el.cloneNode(true); // Получаем ранее созданную или создаём впервые секцию для печати var printSection = document.getElementById('printSection'); if (!printSection) { printSection = document.createElement("div"); printSection.id = "printSection"; document.body.appendChild(printSection); } // printSection.innerHTML = ''; printSection.appendChild(elCopy); // прячем всё кроме printSection var children = document.body.children, i, el; for (i = 0; i < children.length; ++i) { el = children[i]; el.style._display = el.style.display; el.style.display = 'none'; } printSection.style.display = 'block'; // Печать window.print(); // Восстанавливаем видимость for (i = 0; i < children.length; ++i) { el = children[i]; el.style.display = el.style._display; delete el.style._display; } printSection.style.display = 'none'; // Очищаем DOM printSection.innerHTML = ''; } 
     table tr:nth-child(even) { background-color: silver; } @media print { * {-webkit-print-color-adjust: exact;} } 
     <html> <head> <script src="http://vanilla-js.com/?download"></script> </head> <body> <h3>Page title</h3> <table id="userlist" border=1> <tr><th>Id</th><th>Name</th></tr> <tr><td>1</td><td>Alice</td></tr> <tr><td>2</td><td>Bob</td></tr> <tr><td>3</td><td>Charlie</td></tr> </table> <hr/> <div> <button onclick="printById('userlist')">Print...</button> </div> </body> </html>

    PS: Instead of jquery , vanillaJs was used. Make sure you remember to connect it.

    • Thank you, but for some reason it does not work for me .. - dexploizer
    • Say "does not work" means to say nothing. Describe the behavior, the presence of errors, etc. - vp_arth
    • There are no mistakes. Library hooked up. I click on the button and nothing happens - dexploizer
    • Does the snippet work? - vp_arth

    Found a simple and working version! The main thing is not to forget to connect jquery, and then everything is simple.

      <a href='#' id='print' onclick='printData()'><span class='glyphicon glyphicon-print'></span></a>

    Here is the button itself. Below is the entire code.

     function printData() { var divToPrint = document.getElementById("printTable"); //Указываем ID элементадля печати newWin = window.open(""); newWin.document.write(divToPrint.outerHTML); newWin.print(); newWin.close(); }

    That's all!