Path: csiph.com!usenet.pasdenom.info!weretis.net!feeder1.news.weretis.net!news.swapon.de!fu-berlin.de!uni-berlin.de!individual.net!not-for-mail
From: "Mel Smith" <med_cutout_syntel@aol.com>
Newsgroups: comp.lang.javascript
Subject: JS/ECMA script created table question
Date: Sun, 24 Nov 2013 11:33:29 -0700
Lines: 193
Message-ID: <bfev3vFcjrpU1@mid.individual.net>
X-Trace: individual.net ffTTUARv/DYhrAp8wXw7hwqu6XBtzikMiO5ZNXd27RvaqaBDvJ
Cancel-Lock: sha1:r0xtX61GuwuGFMXrrwt/MwErNCg=
X-Priority: 3
X-MSMail-Priority: Normal
X-Newsreader: Microsoft Outlook Express 6.00.2900.5931
X-RFC2646: Format=Flowed; Original
X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.6157
Xref: csiph.com comp.lang.javascript:22170

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