Log in

View Full Version : 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.



<!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
<!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:


table {color: red;}

Then just add the highlighted to our function:


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