Copy table and open a new popup window

**jason_kelly** · 08-27-2013, 01:15 PM

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>

**jscheuer1** · 08-27-2013, 02:07 PM

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.

**jason_kelly** · 08-27-2013, 02:44 PM

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

**jscheuer1** · 08-27-2013, 03:38 PM

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.

Thread: Copy table and open a new popup window

Thread Tools

Search Thread

Copy table and open a new popup window

Similar Threads

Open Link in popup Window Question

Open a popup and close it again from parent (opener) window

Want to close a popup and open the link in main window

Open Popup for form, when complete close popup and refresh main window

Open New popup window using JavaScript in .php file

Bookmarks

Bookmarks

Posting Permissions