javascript - 为什么我复制一个表，头信息丢失了

Question

我使用JS复制表格。 原始表 html 是:

<table id="commentTable" border="0" cellpadding="4" cellspacing="1"  width="95%" align="center" class="ListClass">
      <thead>
        <tr class="ListHeadClass">
          <td align="center" width="10%">
            <font style="color:#FFFFFF;">
                ID
            </font>
          </td>
          <td align="center" width="10%">
            <font style="color:#FFFFFF;">
                Name
            </font>
          </td>
        </tr>
      </thead>          
      <tbody id="commentBody" class="text11">
            <tr class="ListHeadClass">
                    <td align="center" width="10%">
                        <font style="color:#FFFFFF;">
                        E00033
                    </font>
          </td>
          <td align="center" width="10%">
            <font style="color:#FFFFFF;">
                Tom
            </font>
          </td>
        </tr>
                </tbody>

</table>

我的Js代码是:

document.getElementById("signing").innerHTML=window.opener.document.getElementById("commentTable").innerHTML;

结果是它显示了 body 部分，但没有显示头部部分。有人可以帮忙吗？谢谢。

Answer 1

因为您正在使用innerHTML ，这是表格的内部内容。

要获取整个表格，包括 table 元素，请使用 outerHTML :

document.getElementById("signing").innerHTML=window.opener.document.getElementById("commentTable").outerHTML;
// >>----------------------------------------------------------------------------------------------^^^^^^^^^

示例:

document.getElementById("inner").innerHTML =
  document.getElementById("commentTable").innerHTML;

document.getElementById("outer").innerHTML =
  document.getElementById("commentTable").outerHTML;

/* Since the table data uses white text */
body {
  background-color: black;
  color: white;
}

<div>Original Table:</div>
<table id="commentTable" border="0" cellpadding="4" cellspacing="1"  width="95%" align="center" class="ListClass">
      <thead>
        <tr class="ListHeadClass">
          <td align="center" width="10%">
            <font style="color:#FFFFFF;">
                ID
            </font>
          </td>
          <td align="center" width="10%">
            <font style="color:#FFFFFF;">
                Name
            </font>
          </td>
        </tr>
      </thead>          
      <tbody id="commentBody" class="text11">
            <tr class="ListHeadClass">
                    <td align="center" width="10%">
                        <font style="color:#FFFFFF;">
                        E00033
                    </font>
          </td>
          <td align="center" width="10%">
            <font style="color:#FFFFFF;">
                Tom
            </font>
          </td>
        </tr>
                </tbody>

</table>
<div>Result using <code>innerHTML</code>:</div>
<div id="inner"></div>
<div>Result using <code>outerHTML</code>:</div>
<div id="outer"></div>

但是你不需要通过标记(这需要浏览器旋转 DOM 结构来构建 HTML 字符串，然后 [设置] 将该字符串解析为 DOM 结构) ，您可以使用 cloneNode(true) 复制元素:

document.getElementById("signing").appendChild(
    window.opener.document.getElementById("commentTable").cloneNode(true)
);

示例:

document.getElementById("clone").appendChild(
    document.getElementById("commentTable").cloneNode(true)
);

/* Since the table data uses white text */
body {
  background-color: black;
  color: white;
}

<div>Original Table:</div>
<table id="commentTable" border="0" cellpadding="4" cellspacing="1"  width="95%" align="center" class="ListClass">
      <thead>
        <tr class="ListHeadClass">
          <td align="center" width="10%">
            <font style="color:#FFFFFF;">
                ID
            </font>
          </td>
          <td align="center" width="10%">
            <font style="color:#FFFFFF;">
                Name
            </font>
          </td>
        </tr>
      </thead>          
      <tbody id="commentBody" class="text11">
            <tr class="ListHeadClass">
                    <td align="center" width="10%">
                        <font style="color:#FFFFFF;">
                        E00033
                    </font>
          </td>
          <td align="center" width="10%">
            <font style="color:#FFFFFF;">
                Tom
            </font>
          </td>
        </tr>
                </tbody>

</table>
<div>Result using <code>cloneNode(true)</code>:</div>
<div id="clone"></div>

<小时/>

旁注:font 标签已被弃用十多年。使用 span 代替(通常与类一起使用，以便样式与内容分开)。