SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question innerHTML and printing help

    Okay so I am implementing a YUI datatable to display a table on my website. I have tried to use the following code for a print button that opens up a new page and would hopefully copy over the data to a printable page all on its own without any of my navigation links or anything.

    Code HTML4Strict:
        <input id = "search" type="button" name="print" value="Print" onmouseover="this.id='searchhov'" onmouseout="this.id='search'" onClick="clicked()"/><br>
     
    <script type="text/javascript">
     var win=null;
     
     function clicked()
    {
        var check = null;
        check = document.getElementById('testTableContainer');
        alert(check);
        printIt(check.innerHTML);
     
    }
     function printIt(printThis)
     {
       win = window.open();
       self.focus();
       win.document.open();
       win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
       win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');
       win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
       win.document.write(printThis);
       win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
       win.document.close();
       win.print();
       win.close();
     
     }
    </script>

    i have a button on my page that activates clicked() when pressed. basically this code works except for one problem. It prints an extra row at the very top of the new print page of the column names, except also in the wrong format. Here is the innerhtml of my document, you can easily see at the top there is a whole extra div that displays the column names twice:

    Code HTML4Strict:
    <div class="yui-dt-hd"><table id="yui-dt0-headtable"><thead><tr id="yui-dt0-hdrow0-a11y"><th colspan="1" rowspan="1" id="yui-dt0-th0-a11y"><div><span>Name_First</span></div></th><th colspan="1" rowspan="1" id="yui-dt0-th1-a11y"><div><span>Name_Last</span></div></th><th colspan="1" rowspan="1" id="yui-dt0-th2-a11y"><div><span>email</span></div></th><th colspan="1" rowspan="1" id="yui-dt0-th3-a11y"><div><span>Name_Middle</span></div></th><th colspan="1" rowspan="1" id="yui-dt0-th4-a11y"><div><span>Mailing_Address_City</span></div></th></tr></thead></table></div><div class="yui-dt-bd"><table style="" id="yui-dt0-bodytable"><thead><tr class="yui-dt-first yui-dt-last" id="yui-dt0-hdrow0"><th class="yui-dt-sortable yui-dt-first" colspan="1" rowspan="1" id="yui-dt0-th0"><div class="yui-dt-col-Name_First yui-dt-col-0 yui-dt-liner" id="yui-dt0-th0-liner"><span class="yui-dt-label"><a href="yui-dt0-sort0-ascending" title="Click to sort ascending" class="yui-dt-sortable">Name_First</a></span></div></th><th class="yui-dt-sortable" colspan="1" rowspan="1" id="yui-dt0-th1"><div class="yui-dt-col-Name_Last yui-dt-col-1 yui-dt-liner" id="yui-dt0-th1-liner"><span class="yui-dt-label"><a href="yui-dt0-sort1-ascending" title="Click to sort ascending" class="yui-dt-sortable">Name_Last</a></span></div></th><th class="yui-dt-sortable" colspan="1" rowspan="1" id="yui-dt0-th2"><div class="yui-dt-col-email yui-dt-col-2 yui-dt-liner" id="yui-dt0-th2-liner"><span class="yui-dt-label"><a href="yui-dt0-sort2-ascending" title="Click to sort ascending" class="yui-dt-sortable">email</a></span></div></th><th class="yui-dt-sortable" colspan="1" rowspan="1" id="yui-dt0-th3"><div class="yui-dt-col-Name_Middle yui-dt-col-3 yui-dt-liner" id="yui-dt0-th3-liner"><span class="yui-dt-label"><a href="yui-dt0-sort3-ascending" title="Click to sort ascending" class="yui-dt-sortable">Name_Middle</a></span></div></th><th class="yui-dt-sortable yui-dt-last" colspan="1" rowspan="1" id="yui-dt0-th4"><div class="yui-dt-col-Mailing_Address_City yui-dt-col-4 yui-dt-liner" id="yui-dt0-th4-liner"><span class="yui-dt-label"><a href="yui-dt0-sort4-ascending" title="Click to sort ascending" class="yui-dt-sortable">Mailing_Address_City</a></span></div></th></tr></thead><tbody class="" tabindex="0"><tr class="yui-dt-even yui-dt-first" style="" id="yui-dt0-bdrow0"><td headers="yui-dt0-th0 " id="yui-dt0-bdrow0-cell0"><div class="yui-dt-col-Name_First yui-dt-col-0 yui-dt-liner yui-dt-sortable"><a href="submissions?email=user2@test.com&amp;index=1">Dan</a></div></td><td headers="yui-dt0-th1 " class="yui-dt-last" id="yui-dt0-bdrow0-cell1"><div class="yui-dt-col-Name_Last yui-dt-col-1 yui-dt-liner yui-dt-sortable">Cranzly</div></td><td headers="yui-dt0-th2 " id="yui-dt0-bdrow0-cell2"><div class="yui-dt-col-email yui-dt-col-2 yui-dt-liner yui-dt-sortable">user2@test.com</div></td><td headers="yui-dt0-th3 " id="yui-dt0-bdrow0-cell3"><div class="yui-dt-col-Name_Middle yui-dt-col-3 yui-dt-liner yui-dt-sortable">U</div></td><td headers="yui-dt0-th4 " id="yui-dt0-bdrow0-cell4"><div class="yui-dt-col-Mailing_Address_City yui-dt-col-4 yui-dt-liner yui-dt-sortable">Canandaigua</div></td></tr><tr class="yui-dt-odd yui-dt-last" style="" id="yui-dt0-bdrow1"><td headers="yui-dt0-th0 " id="yui-dt0-bdrow1-cell5"><div class="yui-dt-col-Name_First yui-dt-col-0 yui-dt-liner yui-dt-sortable"><a href="submissions?email=user9@test.com&amp;index=2">Alabaster</a></div></td><td headers="yui-dt0-th1 " class="yui-dt-last" id="yui-dt0-bdrow1-cell6"><div class="yui-dt-col-Name_Last yui-dt-col-1 yui-dt-liner yui-dt-sortable">Turk</div></td><td headers="yui-dt0-th2 " id="yui-dt0-bdrow1-cell7"><div class="yui-dt-col-email yui-dt-col-2 yui-dt-liner yui-dt-sortable">user9@test.com</div></td><td headers="yui-dt0-th3 " id="yui-dt0-bdrow1-cell8"><div class="yui-dt-col-Name_Middle yui-dt-col-3 yui-dt-liner yui-dt-sortable"></div></td><td headers="yui-dt0-th4 " id="yui-dt0-bdrow1-cell9"><div class="yui-dt-col-Mailing_Address_City yui-dt-col-4 yui-dt-liner yui-dt-sortable">Albany</div></td></tr></tbody><tbody style="display: none;"><tr class="yui-dt-first yui-dt-last"><td class="yui-dt-first yui-dt-last" colspan="5"><div class="yui-dt-liner yui-dt-loading">Loading data...</div></td></tr></tbody></table></div>


    sorry for the long code post. anyway, im using a cgi perl script for this also. Basically, does anyone know how i can delete those extra column names from either the inner.HTML or wherever so that I can just print the page without them? Thanks alot!

    Evan

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Why are you using such an antiquated technique rather than just having a media=print stylesheet for the original page that hides what you don't want to print?
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •