Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #22174

Re: JS/ECMA script created table question

Show all headers | View raw

Il 24/11/2013 19:33, Mel Smith ha scritto:
> Hi:
>
>      I have a page which is primarily a n-row table with 13 columns.  n- can
> be 0 thru approx 1000.
>
>      Six of the columns have a 'Sort' button on the top row whereby the user
> can 'click'. Then I submit/refresh the entire page and one second later I
> display the new page showing the table freshly sorted.
>
>      This table-dominant page is built by JS/ECMAscript from a *long* string
> of data sent to the client's browser.
>
> Problem:
>
>      The user may wish to 'print' all or part of this table.
>
> Question:
>
>      What can I do in JS to make the page black on white printable --- rather
> than just pretty and viewable ?
>

Hi Mel,
I do that way: define a style called "default" :
<style type='text/css' title='default'>
body {FONT-FAMILY: Verdana, Helvetica, Arial, Tahoma; MARGIN-TOP: 0px; 
COLOR: #404040; BACKGROUND-COLOR: #ffffff; FONT-SIZE: 9pt; 
MARGIN-LEFT:0px; }
.Head0 {PADDING: 3px; FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: 
#404040; FONT-FAMILY: Verdana, Helvetica, Arial, Tahoma; 
BACKGROUND-COLOR: #deffff; TEXT-ALIGN: center}
.Row1 {PADDING: 2px; FONT-SIZE: 10pt; COLOR: #404040; FONT-FAMILY: 
Verdana, Helvetica, Arial, Tahoma; BACKGROUND-COLOR: #ffffff; 
TEXT-ALIGN: left}
.Btn1 {FONT-SIZE: 9pt; FONT-FAMILY: Verdana, Helvetica, Arial, Tahoma; 
BACKGROUND-COLOR: #deffff; COLOR: #404040}
.Btn1:hover{color:#ff0000;}
... etc. In this style there is also:
div{display:none;}
</style >

Then a style for print preview:

<style type='text/css' title='PrintPreview'>
body { color : #000000; background-color : #ffffff; 
background-image:none; FONT-FAMILY: Verdana, Helvetica, Arial, Tahoma; 
font-size : 10pt; }
button { display:none}
div { display:inline}
@media print {
button { visibility:hidden; }
body{ background-color:#FFFFFF; background-image:none; color:#000000 }
}
</style>

In the document you then put f.e. something like this:

<center><div id='PrintHeader'
<center><table cellspacing=2 cellpadding=4 bgcolor=#deffff>
<td bgcolor=#ffffff><font face='arial' size=2>
SiGeD - Data:
</td>
<td bgcolor=#ffffff><font face='arial' size=2>
24-11-2013
</td>
<td bgcolor=#ffffff><font face='arial' size=2>
Criteri di ricerca:
</td>
<td bgcolor=#ffffff><font face='arial' size=2>
Data Documento:
</td>
<td bgcolor=#ffffff><font face='arial' size=2>
24/11/2013
</td>
</table></center>
</center></div>

At first, this div will not be displayed.

Now follows the table with "tiny" headers:
<center><table border=1 class=Row1 style='border-collapse:collapse; '>
<tr class=Row1>
<td class=Head0>Data</td>
<td class=Head0>Testata:</td>
<td class=Head0>Codice</td>
<td class=Head0>Titolo</td>
<td class=Head0>Rassegna</td>
</tr>
<tr class=Row0>
<td>  -  -    </td>
<td>DIRITTO DEL LAVORO                      </td>
<td>      </td>
<td><table><tr><td>Nuove regole sullo spesometro</td></tr>
<tr><td></td></tr></table></td>
<td>NEWSLETTER               </td>
</td>
</tr>
</center></table>

This table will be visible. Now you add the button that switches the 
style, and the print button, hidden:
<button class=Btn1 onclick='preview(this,1)' id='ante'>Print 
Preview</button>
<button class=Btn1 id='prbut' style='display:none' 
onclick='window.print()'>Print</button>

Then I have the following javascript functions:

function preview(b,modo){
if (modo==1){
chgSty('PrintPreview')
document.getElementById('prbut').style.display='inline'
document.getElementById('ante').style.display='inline'
b.innerHTML='Close Preview'
b.onclick=function(){preview(this,0)}
}else{
chgSty('default')
document.getElementById('prbut').style.display='none'
b.innerHTML='Preview Print'
b.onclick=function(){preview(this,1)}
}
}
function chgSty(n){
if (document.styleSheets){
a=document.styleSheets
for (b=0;b<a.length;b++){
if (a[b].title) {
a[b].disabled=true;
if (a[b].title==n) a[b].disabled=false
}
}
}else{
  var i, a, main;
for(i=0; (a = document.getElementsByTagName('style')[i]); i++) {
a.disabled = true;
if(a.getAttribute('title') == title) a.disabled = false;
}
}
}
</script >

When you click on the "preview" button the hidden div will become 
visible, the "preview" button will disappear and the button "print" will 
appear instead.
The whole page will be displayed black on white. The @media print rule 
then hides the button "print" itself from the printed page.

Ah, oh, and it's all server-side generated, with Harbour ;-)

HTH,
Dan

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

JS/ECMA script created table question "Mel Smith" <med_cutout_syntel@aol.com> - 2013-11-24 11:33 -0700
  Re: JS/ECMA script created table question Christoph Michael Becker <cmbecker69@arcor.de> - 2013-11-24 20:21 +0100
    Re: JS/ECMA script created table question "Mel Smith" <med_cutout_syntel@aol.com> - 2013-11-24 13:57 -0700
      Re: JS/ECMA script created table question Christoph Michael Becker <cmbecker69@arcor.de> - 2013-11-28 16:10 +0100
        Re: JS/ECMA script created table question Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-11-28 16:39 +0100
        Re: JS/ECMA script created table question "Mel Smith" <med_cutout_syntel@aol.com> - 2013-11-28 08:46 -0700
  Re: JS/ECMA script created table question danca <cyberdanny@tiscalinet.it> - 2013-11-24 23:58 +0100
    Re: JS/ECMA script created table question "Mel Smith" <med_cutout_syntel@aol.com> - 2013-11-24 18:24 -0700
      Re: JS/ECMA script created table question "Mel Smith" <med_cutout_syntel@aol.com> - 2013-11-24 20:16 -0700
        Re: JS/ECMA script created table question [a bit OT] danca <cyberdanny@tiscalinet.it> - 2013-11-25 10:55 +0100
          Re: JS/ECMA script created table question [a bit OT] "Mel Smith" <med_cutout_syntel@aol.com> - 2013-11-25 08:44 -0700

csiph-web