CODEWITHSUNDEEP
htmlcss
dames
dames

Reputation: 1481

Printing a html table

I have the following table for example, how do i add print functionality just to the table? And a button that when clicked, the following table is printed via printer

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Upvotes: 2

Views: 33136

Answers (5)

Betty Mock
Betty Mock

Reputation: 1393

One approach is to open the table in a new page. You can do this with a javascript submit of a form to the new page, passing along all the variables you will need to build your table. 

<form name = "theform" .... >
<input type = "hidden" name = "something" value = "importantdata">
  ... stuff
</form>

<script type = "text/javascript">
submit('theform')
</script>

Then put the code to generate the table on the new page along with your button. If you don't want a button, you can still invoke the print function by simply referring to your javascript function within your html code:

<script type = "text/javascript">
printit()
</script>

You can also open your table in a new page using the javascript window.open() method. This is a good approach if you don't have too many variables to pass to the new window. You can pass a few small things via url variables, which you can set up in your javascript function.

I have also used an approach where I stay on the same page and the user can click on something to remove the display of everything but the table. This is done by wrapping the removable stuff in a div

<div id= "remove">
   stuff
</div>

When the user does a click, the javascript function that is fired sets the display for that id to "none". 

document.getElementById('remove').style.display = 'none';

A second click restores the display. The click doesn't have to be on a button. I have used it on a report heading, so that everything would disappear except the report itself. You could put it on one of your table cells.

In any case, the window.print() method will only open a window for the printer; the user can then set up the print job as he/she wishes, make sure the printer is on, etc.

Upvotes: 1

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28538

You require to create new style sheet print.css and set CSS media=print

for example :

<style media="screen">
  .noPrint{ display: block; }
  .yesPrint{ display: block !important; }
</style>

<style media="print">
  .noPrint{ display: none; }
  .yesPrint{ display: block !important; }
</style>

and add class to "yesPrint" to the sections you want to print

<div class= "yesPrint">
 <table border="1">
 <tr>
 <th>Header 1</th>
 <th>Header 2</th>
 </tr>
 <tr>
 <td>row 1, cell 1</td>
 <td>row 1, cell 2</td>
 </tr>
 <tr>
 <td>row 2, cell 1</td>
 <td>row 2, cell 2</td>
 </tr>
 </table>
 </div>

Now add a button

<input TYPE="button" onClick="window.print()">

for more detatil : http://www.codeproject.com/KB/HTML/Printing_with_CSS.aspx

Upvotes: 5

Jens Egholm
Jens Egholm

Reputation: 2710

Actually you can print only the table. It requires some JavaScript magic (inspired by this page). The idea is that we open a new page (JS-window element), insert the table into that page and prints it. There are probably some portability issues with different browsers. Also, some browsers will probably complain about popups but yeah.. in theory it should work. :-)

The code could look something like this;

<script type="text/javascript">
  var win = window.open(); // We create the window

  win.document.open(); // We open the window (popup-warning!)
  win.document.write("<h1>Hello world</h1>"); // Insert table here <--

  win.print(); // Print the content
  win.close(); // Close down the page
</script>

Upvotes: 0

lvil
lvil

Reputation: 4326

I use this function: 

<script type="text/javascript">
function PrintElem(elem)
    {
        Popup($(elem).html());
    }

    function Popup(data)
    {
        var mywindow = window.open('', 'my div', 'height=400,width=600');
        mywindow.document.write('<html><head><title></title>');
        /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
        mywindow.document.write('</head><body style="direction:rtl;"><pre>');
        mywindow.document.write(data);
        mywindow.document.write('</pre></body></html>');
        mywindow.document.close();
        mywindow.print();
        return true;
    }
</script>

You can modify it to your needs.
In fact it opens a new window containing this element and prints it.

Upvotes: 2

Royi Namir
Royi Namir

Reputation: 148524

js way : ( you cant print only the table)

<FORM>
<INPUT TYPE="button" onClick="window.print()">
</FORM>

c# way :

you should open a new page or container, with styles or crystal reports - and print using c# commands.

Upvotes: 0

Related Questions