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

Groups > comp.lang.javascript > #22170 > unrolled thread

JS/ECMA script created table question

Back to article view | Back to comp.lang.javascript

Contents

  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

#22170 — JS/ECMA script created table question

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 ?

FYI:
    Below is my current working but not cleaned up portion of code where the 
table is built from a long string with column and row delimiters..


Thanks for suggestions !

-Mel Smith


*****  Current JS code for screen viewing of table *****

<script type="text/javascript">
var playdatecol = 2 ;
var shortnamecol = 4 ;
var ratingcol = 5 ;
var slopecol = 6 ;
var f9col = 8 ;
var s9col = 9 ;
var grosscol = 10 ;

function loadscores() {
var i,j,scrtable,screl,numscoresel,numcolsel,scrstr,nscrcnt,scrlines ;
var scrfields,scrfield0 ;
var scrtable,row,cells,cell,numcols ;
var numscoresel = getobj("hnumscores") ;
var numcolsel = getobj("hnumcols") ;
var sortel = getobj("hsortcol") ;
var sortcol = sortel.value ;
var thissortcol ;
var asortcols,asort ;
var sortbutt = '<input type="button" class="sortbutt" id="iyyyy" 
onclick="chksortbutt(xxxx);" value="Sort" />'
var sortedtext = '<span id="isorted" 
style="color:black;background:yellow;">&nbsp;Sorted&nbsp;</span>&nbsp;'
var thisbutt ;
numcols = +numcolsel.value ;

var screl ;
nscrcnt = parseInt(numscoresel.value,10) ;
scrtable = getobj("iscrtable") ;

if (nscrcnt > 0 ) {
   screl = getobj("hscores") ;
   // have to read in and parse the scores string
   scrstr = screl.value ;
   // now break down the string
   scrlines = scrstr.split("<") ; // get array of score lines
   for (i=0;i<nscrcnt;i++) {
      row = scrtable.insertRow(i) ;
      scrfields = scrlines[i].split("|") ;
      scrfield0 = scrfields[0] ;

      if (scrfield0 !== "sep" && scrfield0 !== "l20") {
         for (j=0;j<numcols;j++) {
            cell = row.insertCell(j) ;
            cell.innerHTML = scrfields[j] ;
            }
         }
      if (scrfield0 == "sep") {
         cell = row.insertCell(0) ;
         cell.colSpan = numcols ;
         cell.style.background = "yellowgreen" ;
         cell.style.color = "black" ;
         cell.innerHTML = "<hr />" ;
         }

      if (scrfield0 == "l20") {
         cell = row.insertCell(0) ;
         cell.colSpan = numcols ;
         cell.style.background = "yellowgreen" ;
         cell.style.color = "black" ;
         cell.innerHTML = " Last Twenty Scores Above " ;
         }
      }
   }
setcolwidths() ;  // this should set the column widths of header, body, and 
footer
// Now place buttons in 0'th row of score table
row = scrtable.rows[0] ;  // get the 0'th row
cells = row.cells ;      // get the cells object

asortcols = [["playdate",playdatecol],["shortname",shortnamecol],
              ["rating",ratingcol],["slope",slopecol],
              ["f9",f9col],["s9",s9col],["gross",grosscol]
            ]

for (i=0;i<asortcols.length;i++) {
   asort = asortcols[i] ;
   thissortcol = asort[0] ;
   if (!partof(thissortcol,sortcol)) {
      thisbutt = sortbutt.replace("xxxx","'"+thissortcol+"'") ;
      thisbutt = thisbutt.replace("yyyy",thissortcol) ;
      cells[asort[1]].innerHTML = thisbutt ; // see what this looks like
      }
   else {
      // have to show the 'sorted' message here
      cells[asort[1]].innerHTML = sortedtext ;

      }
   }
}


function setcolwidths() {
var i,j,pwidths,tables,row,cells,cell,cellval
var lgotbest,lgotworst,bestcell,best,worstcell,worst,nlen,nlen2 ;
var scrtable ;
pwidths =   [5,8,8,5,19,7,8,8,6,6,6,7,7];   // width of columns in 
percentages -- 99% total

tables = [getobj("ifixedheader"),getobj("iscrtable")]
nlen = tables.length ;

for (i= 0;i < nlen;++i) {
   for (j=0,cells = tables[i].rows[0].cells,nlen2 = cells.length;j < 
nlen2;++j) {
      cells[j].style.width = "" + pwidths[j] + "%";   // Denis McMahon 
suggested the "" + ...
      }
   }
scrtable = tables[1] ;
nlen = scrtable.rows.length ;   // re-define nlen

cells = scrtable.rows[1].cells ;
cells[0].style.color="white" ;
cells[0].style.background = "green" ;
bestcell = cells[1] ;
for (j=8;j<13;j++) {
   if (j===11) continue ;
   cells[j].style.color="white" ;
   cells[j].style.background = "green" ;
   }
cells = scrtable.rows[2].cells ;
cells[0].style.color="white" ;
cells[0].style.background = "red" ;
worstcell = cells[1] ;
for (j=8;j<13;j++) {
   if (j===11) continue ;
   cells[j].style.color="white" ;
   cells[j].style.background = "red" ;
   }
// access the game number of the best game

best = (bestcell.innerHTML).split(" ")[1] ;
worst = (worstcell.innerHTML).split(" ")[1] ;

lgotbest = lgotworst = false ;

for (i=4;i<nlen;i++) {
   if (lgotbest && lgotworst) break ;
   cells = scrtable.rows[i].cells ;
   cell = cells[0] ;
   cellval = cell.innerHTML ;
   if (!lgotbest && cellval === best ) {
      cell.style.color = "white" ;
      cell.style.background = "green" ;
      lgotbest = true ;
      continue ;
      }
   if (!lgotworst && cellval === worst ) {
      cell.style.color = "white" ;
      cell.style.background = "red" ;
      lgotworst = true ;
      continue ;
      }
   }
}

***** end of code screen building code ***** 

[toc] | [next] | [standalone]

#22171

Mel Smith wrote:

>     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 ?

You may consider using CSS classes instead of modifying the style
property of the cells directly, e.g.

  cell.className = "my-class-name";

or if you need more than one class for a single cell:

  cell.className += " second-class";

The latter is a rather sloppy way, that might better replaced by an
addClass() function, or so.

Anyway, then you can define CSS rules for the classes to style the cells
and use @media screen vs. @media print rules as desired.  The details
are OT in this newsgroup, so that might better be discussed in
c.i.w.a.stylesheets or so.

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#22172

Christoph said:

> You may consider using CSS classes instead of modifying the style
> property of the cells directly, e.g.
>
>  cell.className = "my-class-name";
>
> or if you need more than one class for a single cell:
>
>  cell.className += " second-class";
>
> The latter is a rather sloppy way, that might better replaced by an
> addClass() function, or so.
>
> Anyway, then you can define CSS rules for the classes to style the cells
> and use @media screen vs. @media print rules as desired.  The details
> are OT in this newsgroup, so that might better be discussed in
> c.i.w.a.stylesheets or so.

Hi Christoph:

    I'll review what you said.

    (btw, another option -- which I may have to use- is to build a pdf file 
at the server, and then send a link to the client to *that* file.  But this 
means I may have to save this file on the server, or maybe email file to the 
client. Both are unpalatable options for me.)

    (another btw:  I've never used/heardof @media screen or @media print. 
Will have to google that)

Thank you

-Mel

[toc] | [prev] | [next] | [standalone]

#22205

Mel Smith wrote:

>     (btw, another option -- which I may have to use- is to build a pdf file 
> at the server, and then send a link to the client to *that* file.  But this 
> means I may have to save this file on the server, or maybe email file to the 
> client. Both are unpalatable options for me.)

There is, however, a third option: build the PDF dynamically on each
respective request and deliver it as application/pdf.  In your case that
seems to be unnecessarily complicated and wasteful, but there might be
use cases where this technique could be reasonable deployed.

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#22206

Christoph Michael Becker wrote:

> Mel Smith wrote:
>>     (btw, another option -- which I may have to use- is to build a pdf
>>     file
>> at the server, and then send a link to the client to *that* file.  But
>> this means I may have to save this file on the server, or maybe email
>> file to the client. Both are unpalatable options for me.)
> 
> There is, however, a third option: build the PDF dynamically on each
> respective request and deliver it as application/pdf.  In your case that
> seems to be unnecessarily complicated and wasteful, but there might be
> use cases where this technique could be reasonable deployed.

It is the best current practice for small PDF documents that have to be
up-to-date.
 
-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#22207

Cristoph said:
> Mel Smith wrote:
>
>>     (btw, another option -- which I may have to use- is to build a pdf 
>> file
>> at the server, and then send a link to the client to *that* file.  But 
>> this
>> means I may have to save this file on the server, or maybe email file to 
>> the
>> client. Both are unpalatable options for me.)
>
> There is, however, a third option: build the PDF dynamically on each
> respective request and deliver it as application/pdf.  In your case that
> seems to be unnecessarily complicated and wasteful, but there might be
> use cases where this technique could be reasonable deployed.
>

Hi Christoph:

    Yes, I'm doing prelim work on that option now (using the R&R Report 
Writer, and its option to produce pdf files as output).   This method allows 
much more sophisticated output.  I used this method about a year or so ago 
on another project, and it worked -- but slowly (my server started up the 
R&R runtime executable which looked into databases and then produced the 
output, and it took about 15 seconds before the pdf file was ready for the 
clients to view)  but it was designed for a weekly output file where the 
clients (only 70 max of them could click on the link to the output pdf file 
and view/print it).

    If I try to use this same technque, I could be facing 50 or so 
simultaneous requests for the server to start up the R&R runtime exe, and 
creating all these output pdf files simultaneously   -- each taking approx 
15 seconds (maybe I'm wrong about this)  for the fle to be produced.

    Anyway, I'm working on that option --- but with trepidation ...

    You say above  "deliver it as application/pdf" . Would you amplfy that 
please -- if its not OT ?

Thank you.

-Mel Smith

[toc] | [prev] | [next] | [standalone]

#22174

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

[toc] | [prev] | [next] | [standalone]

#22176

Dan said:


> I do that way: define a style called "default" :
<snip> lots of good stuff


Hi Dan:

    I've saved your code and will read/digest it over the next day or so.

Thank you for this !

-Mel

[toc] | [prev] | [next] | [standalone]

#22177

Hi Dan:

    I noticed that yo mentioned our Harbour language as your CGI app of 
choice.
.
    Great !

    As you know, I too usexHarbour as my CG app under Apache 2.2.22

    You have also probably suffered under the effects of coding in two 
different languages every day, and having to change your 'coding hat' 
frequently.

    I have looked at your 'preview' code and underastand it, and will try to 
modify my html page to accommodate this stylesheet changing idea.

Thanks again.

-Mel

(btw, I'm glad I'm not alone in using the Harbour language (it can perhaps 
be described as 'Hi-C' -- but I have been cursed in the past for this usage) 
as the basis for my server CGI apps. Because its root and power comes from 
its database functions (hundreds of them), it is ideal for apps where the 
html pages it 'serves' are built from the underlying databases it controls.)

[toc] | [prev] | [next] | [standalone]

#22178 — Re: JS/ECMA script created table question [a bit OT]

Il 25/11/2013 04:16, Mel Smith ha scritto:
> Hi Dan:
>
>      I noticed that yo mentioned our Harbour language as your CGI app of
> choice.
> .
>      Great !
>
I am quite confident that xHarbour behaves the same. I use both, but for 
CGI development I decided to use Harbour because the support for many 
different Oses, where xHb is aimed in fact mainly to Windows.

>      As you know, I too usexHarbour as my CG app under Apache 2.2.22

Eh... as a regular in lang.xHarbour it's impossible not to know of you. :-)

>
>      You have also probably suffered under the effects of coding in two
> different languages every day, and having to change your 'coding hat'
> frequently.

Your can bet on it.

>
>      I have looked at your 'preview' code and underastand it, and will try to
> modify my html page to accommodate this stylesheet changing idea.
>
> Thanks again.
>
> -Mel

I am not fluent in js, so the solution I at the end of the tale went for 
costed me some effort. I hope this can save you some time.
I had to clash with js when I decided to go for web applications, and it 
has never been easy. I suppose we are in a similar situation.

>
> (btw, I'm glad I'm not alone in using the Harbour language (it can perhaps
> be described as 'Hi-C' -- but I have been cursed in the past for this usage)
> as the basis for my server CGI apps. Because its root and power comes from
> its database functions (hundreds of them), it is ideal for apps where the
> html pages it 'serves' are built from the underlying databases it controls.)
>
>
[OT]
Completely agree. If you follow Harbour mailing list too, I posted 
recently on this subject and gave a link to my Harbour-powered site.

Dan

[toc] | [prev] | [next] | [standalone]

#22181 — Re: JS/ECMA script created table question [a bit OT]

Dan said:

> [OT]
> Completely agree. If you follow Harbour mailing list too, I posted 
> recently on this subject and gave a link to my Harbour-powered site.

Dan:

    [OT also]

    Yes I follow/read the mailing list and noted your post.

     However, Victor (the moderator) banned me from *writing* any posts 
because of my offering of free quick downloads of the latest hHarbour builds 
:((

-Mel

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web