复制表格并打开一个新的弹出窗口答案

【问题标题】：Copy table and open a new popup window复制表格并打开一个新的弹出窗口
【发布时间】：2016-12-17 01:27:43
【问题描述】：

我需要本网站专家的帮助。

我想要完成的是，单击一个按钮是复制现有表（'数据'），打开一个新的弹出窗口并使用 document.write 将表从上一页写入到新的。

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

【问题讨论】：

标签： javascript dom html-table

【解决方案1】：

Here 是一个工作示例。

按钮需要一个点击处理程序：

<input type="button" value="Open popup" onclick="openPopup();" />

点击处理函数：

function openPopup() {
  var popup = window.open("", "", "width=640,height=480,resizeable,scrollbars"),
      table = document.getElementById("data");

  popup.document.write(table.outerHTML);
  popup.document.close();
  if (window.focus) 
    popup.focus();
}

【讨论】：

window.open 经常会返回 null

【解决方案2】：

首先为您的按钮添加 onclick 功能：

  <input type="button" value="test it" onclick="openWin()" />

在脚本中：

函数 openWin() {

myWindow=window.open('','','width=200,height=100'); myWindow.document.write(document.getElementById('data').outerHTML);

myWindow.focus();

}

就是这样。

我不确定跨浏览器的 outerHTML 属性兼容性。请检查一次。

【讨论】：