Print only html table using javascript

Question

I have the following basic html table with a Java function to print only the table content However the Print button does nothing when clicked,I figure probably the java coding is the issue, however it is not working could I get a third pair of eyes to assist please

<html>
<body>

<table border="1" cellpadding="3" id="printTable">
    <tbody><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>Print me</button>

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

$('button').on('click',function(){
printData();
})
</script>
</body>
</html>

Do you understand the code you posted? If so, you should edit your post explaining exactly what it is supposed to do. What do you expect to happen? and so on — Paco
– Paco, Commented Apr 13, 2015 at 16:59
@Paco Yes The table has an ID="printTable" which refers to the java function "PrintData", and when the button is clicked it shoud print only the table with the PrintTable Id, however Nothiong happens when the button is clicked, and thats what I am seeking help with — dames
– dames, Commented Apr 13, 2015 at 17:03
Remove outerHtml & instead try document.getElementById("printable").innerHTML — Alekhya Vemavarapu
– Alekhya Vemavarapu, Commented Apr 13, 2015 at 17:03

noryb009 · Accepted Answer · 2015-04-13 17:16:29Z

2

When working with javascript, it is often useful to look at your browser's console. After opening this page, mine has the error:

ReferenceError: $ is not defined

$ is a global variable inserted by jQuery. Try adding

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

to the code. This will include the jQuery library.

edited Apr 13, 2015 at 17:16

answered Apr 13, 2015 at 17:04

noryb009

5582 gold badges10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

noryb009 Over a year ago

Be sure to add it before $ is used - right after <button>Print me</button> would be a good place.

Dagriel · Accepted Answer · 2015-04-13 17:19:53Z

1

The call to the javascript function is not correct. When you're using the '$' symbol it means that you're using JQuery. You have 2 options:

1 - Include the jquery library to your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

2 - Call the javascript function directly on the button on the 'onclick' event. This is the best option in your case:

<button onclick="printData()">Print me</button>

answered Apr 13, 2015 at 17:19

Dagriel

5742 silver badges12 bronze badges

Comments

Hille · Accepted Answer · 2024-09-26 12:21:25Z

1

Change

var divToPrint=document.getElementById("printTable");

to

var divToPrint=document.getElementById("<%=printTable.ClientID>");

and add jquery library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

edited Sep 26, 2024 at 12:21

Hille

2,3611 gold badge29 silver badges43 bronze badges

answered Apr 13, 2015 at 17:13

user4779701

851 silver badge8 bronze badges

Collectives™ on Stack Overflow

Print only html table using javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related