Results 1 to 4 of 4

Thread: Copy table and open a new popup window

  1. #1
    Join Date
    Oct 2011
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Copy table and open a new popup window

    Hello,

    I need the help of the experts here on this forum.

    Much thanks and appreciation for everyones help and support.

    What I would like to accomplish is, at the click of a button is to:

    1. copy the existing table below
    2. open a new popup window
    3. Use the document.write to write the table from the previous page onto the new popup page.

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta http-equiv="Content-Language" content="en-ca">
    
    </head>
    
    <body>
    
    <table id="data" border="1" cellspacing="1" width="100" id="table1">
    	<tr>
    		<th>Fruits</th>
    		<th>Vegetables</th>
    		<th>Colors</th>
    		<th>Quantity</th>
    		<th>Price</th>
    	</tr>
    	<tr>
    		<td>Apples</td>
    		<td>Carrots</td>
    		<td>red</td>
    		<td>10</td>
    		<td>0.99</td>
    	</tr>
    	<tr>
    		<td>Pears</td>
    		<td>Celery</td>
    		<td>blue</td>
    		<td>24</td>
    		<td>1.00</td>
    	</tr>
    	<tr>
    		<td>Mangos</td>
    		<td>Broccoli</td>
    		<td>green</td>
    		<td>12</td>
    		<td>1.50</td>
    	</tr>
    	<tr>
    		<td>Oranges</td>
    		<td>Cauliflower</td>
    		<td>purple</td>
    		<td>48</td>
    		<td>1.25</td>
    	</tr>
    </table>
    
    <br>
    
    <input type="button" value="test it"/>
    
    </body>
    
    </html>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta http-equiv="Content-Language" content="en-ca">
    
    </head>
    
    <body>
    <div id="datatableholder">
    <table id="data" border="1" cellspacing="1" width="100" id="table1">
    	<tr>
    		<th>Fruits</th>
    		<th>Vegetables</th>
    		<th>Colors</th>
    		<th>Quantity</th>
    		<th>Price</th>
    	</tr>
    	<tr>
    		<td>Apples</td>
    		<td>Carrots</td>
    		<td>red</td>
    		<td>10</td>
    		<td>0.99</td>
    	</tr>
    	<tr>
    		<td>Pears</td>
    		<td>Celery</td>
    		<td>blue</td>
    		<td>24</td>
    		<td>1.00</td>
    	</tr>
    	<tr>
    		<td>Mangos</td>
    		<td>Broccoli</td>
    		<td>green</td>
    		<td>12</td>
    		<td>1.50</td>
    	</tr>
    	<tr>
    		<td>Oranges</td>
    		<td>Cauliflower</td>
    		<td>purple</td>
    		<td>48</td>
    		<td>1.25</td>
    	</tr>
    </table>
    </div>
    <br>
    
    <input id="test" type="button" value="test it"/>
    <script type="text/javascript">
    document.getElementById('test').onclick = function(){
    	var data = document.getElementById('datatableholder').innerHTML,
    	win = window.open('', '_blank', 'width=800, height=600, top=100, left=100, resizeable, scrollbars');
    	win.document.write(data);
    	win.document.close();
    };
    </script>
    </body>
    
    </html>
    Notes: I put a wrapper div around the table so I could get the full table's markup as the wrapper's innerHTML. The script could create this div and wrap it around the table if need be. I also gave the button an id to assign the click event to it. This is just one of at least several ways that can be done.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2011
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Many thanks for your help John.

    I'd like to insert some CSS now to style the table on the popup page.

    I am at a loss so as to guess where to insert the style tags while I am writting the table to the new popup page?

    Jay

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    There are various ways. The easiest is probably to create a stylesheet, let's call it popcopy.css. You can have all sorts of styles in it and as many as you like. I chose something simple for testing:

    Code:
    table {color: red;}
    Then just add the highlighted to our function:

    Code:
    <script type="text/javascript">
    document.getElementById('test').onclick = function(){
    	var data = document.getElementById('datatableholder').innerHTML,
    	win = window.open('', '_blank', 'width=800, height=600, top=100, left=100, resizeable, scrollbars');
    	win.document.write('<!DOCTYPE html>');
    	win.document.write('<link rel="stylesheet" href="popcopy.css" type="text/css">');
    	win.document.write(data);
    	win.document.close();
    };
    </script>
    Notes: The popcopy.css file should go in the same folder as the page that pops up the window (if not, the relative or absolute path to it should be used in the stylesheet link tag). I added a standards invoking DOCTYPE to the page in the popup because css style is more uniform across browsers with one.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Open Link in popup Window Question
    By theflyingminstrel in forum JavaScript
    Replies: 0
    Last Post: 03-19-2009, 08:33 PM
  2. Open a popup and close it again from parent (opener) window
    By Beverleyh in forum Looking for such a script or service
    Replies: 1
    Last Post: 07-31-2008, 07:13 AM
  3. Want to close a popup and open the link in main window
    By egdcltd in forum Looking for such a script or service
    Replies: 0
    Last Post: 04-04-2008, 05:50 PM
  4. Replies: 0
    Last Post: 01-29-2006, 11:14 PM
  5. Replies: 0
    Last Post: 09-28-2005, 09:06 PM

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
  •