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

Copy table and open a new popup window

本文关键字：一个窗口表格复制更新时间：2023-09-26

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

我想完成的是，点击一个按钮，复制现有的表格（"数据"），打开一个新的弹出窗口，并使用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>

这里是一个工作示例。

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

<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();
}

首先为按钮添加onclick函数：

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

脚本中：

函数openWin（）｛

myWindow=window.open（''，''，'width=200，height=100'）；myWindow.docdocument.write（document.getElementById（'data'）.outerHTML）；

myWindow.focus（）；

}

就是这样。

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