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;

结果是它显示了身体部位，但头部却没有。有人可以帮忙吗？谢谢。

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（通常使用类，以便样式与内容分开）。

为什么我复制表格并丢失头部信息

1 个答案: