How to print the only the tbody of table html using javascript

Question

jsfiddle link

<table border="1" cellpadding="3" id="printTable">
    <tbody id="printTbody"><tr>
        <th>First Name</th>
        <th>Last Name</th>      
        <th>Points</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>      
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>        
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>        
        <td>80</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Johnson</td>        
        <td>67</td>
    </tr>
</tbody></table>

<br />
<br />

<button onclick="printTablefun()">Print Table</button>
<button onclick="printtbodyfun()">Print Tbody</button>
<script>
function printTablefun()
{
   var divToPrint=document.getElementById("printTable");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
}

function printtbodyfun()
{
   var divToPrint=document.getElementById("printTbody");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
}
</script>

Description

1. From this above link i have added the fiddle like and the code

Problem

1. When i click the "Print Table" button its printing the properly as a table
2. When i click the "Print Tbody" button its just printing only the text but in table format

What I needed

1. When i click the "Print Tbody" button have to print the content in the tbody as in a table format

While clicking "Print Table" button

While clicking "Print Tbody" button

Answer 1

I would say the behavior you describe and show in screenshots is correct. a tbody element without a parent table element should be interpreted as text since it marks some rows of a table as body/content of the table and without the table there is no body.

for testing purposes just remove the table tag from your html code and view it in your preferred browser. the output is just text (at least for me in chrome)

if you want the output to be a table, declare it as table:

function printtbodyfun()
{
   var divToPrint=document.getElementById("printTbody");
   newWin= window.open("");
   newWin.document.write("<table>"+divToPrint.outerHTML+"</table>");
   newWin.print();
   newWin.close();
}

as an alternative, you could try to add css to the output window and change the display css value of the tbody to table.

EDIT: didn't got the css solution to work :/

Answer 2

If you want to hide an element on printing you can use css solution by using @media print

@media print {
  .hide-on-printing {
    display: none; // hide the elements have this class when document is being printed
  }
}

 class Print { constructor(elem) { this._elem = elem; elem.onclick = this.onClick.bind(this); } print() { let newWindow = window.open(''); newWindow.document.write(`<table>${table.outerHTML}</table>`); newWindow.print(); newWindow.close(); } table() { this.print(); } tbody() { thead.classList.add('hide-on-printing'); this.print(); } onClick(event) { let action = event.target.dataset.action; if (action) { this[action](); } } } new Print(actions);

 @media print { .hide-on-printing { display: none; } }

 <table border="1" cellpadding="3" id="table"> <thead id="thead"> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> </thead> <tbody id="tbody"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td> </tr> </tbody> </table> <br /> <div id="actions"> <button data-action="table">print table</button> <button data-action="tbody">print body</button> </div>

P/S: I tried to print on current tab it works but not when click button.