why I copy a table and head infomation lost
0
I use JS to copy a table.
The original table html is :
<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>
My Js code is:
document.getElementById("signing").innerHTML=window.opener.document.getElementById("commentTable").innerHTML;
the result is it displayed the body part but the head part is not. Can anyone help? Thanks.
javascript
asked Nov 13 '18 at 9:05
kk luokk luo
1207
add a comment |
0
I use JS to copy a table.
The original table html is :
<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>
My Js code is:
document.getElementById("signing").innerHTML=window.opener.document.getElementById("commentTable").innerHTML;
the result is it displayed the body part but the head part is not. Can anyone help? Thanks.
javascript
asked Nov 13 '18 at 9:05
kk luokk luo
1207
Hello! Do you want to display the table in a div with id of signing? I saw that you set the color for text to white. Try to use a background color to see the text. Try to use only document.getElementById for the right expression without window.opener.
– Andrei Ghervan
Nov 13 '18 at 9:26
add a comment |
0
0
0
I use JS to copy a table.
The original table html is :
<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>
My Js code is:
document.getElementById("signing").innerHTML=window.opener.document.getElementById("commentTable").innerHTML;
the result is it displayed the body part but the head part is not. Can anyone help? Thanks.
javascript
asked Nov 13 '18 at 9:05
kk luokk luo
1207
I use JS to copy a table.
The original table html is :
<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>
My Js code is:
document.getElementById("signing").innerHTML=window.opener.document.getElementById("commentTable").innerHTML;
the result is it displayed the body part but the head part is not. Can anyone help? Thanks.
javascript
javascript
asked Nov 13 '18 at 9:05
kk luokk luo
1207
asked Nov 13 '18 at 9:05
kk luokk luo
1207
asked Nov 13 '18 at 9:05
kk luokk luo
1207
asked Nov 13 '18 at 9:05
kk luokk luo
1207
asked Nov 13 '18 at 9:05
kk luokk luo
1207
1207
Hello! Do you want to display the table in a div with id of signing? I saw that you set the color for text to white. Try to use a background color to see the text. Try to use only document.getElementById for the right expression without window.opener.
– Andrei Ghervan
Nov 13 '18 at 9:26
add a comment |
Hello! Do you want to display the table in a div with id of signing? I saw that you set the color for text to white. Try to use a background color to see the text. Try to use only document.getElementById for the right expression without window.opener.
– Andrei Ghervan
Nov 13 '18 at 9:26
Hello! Do you want to display the table in a div with id of signing? I saw that you set the color for text to white. Try to use a background color to see the text. Try to use only document.getElementById for the right expression without window.opener.
– Andrei Ghervan
Nov 13 '18 at 9:26
Hello! Do you want to display the table in a div with id of signing? I saw that you set the color for text to white. Try to use a background color to see the text. Try to use only document.getElementById for the right expression without window.opener.
– Andrei Ghervan
Nov 13 '18 at 9:26
add a comment |
1 Answer
1
active
oldest
votes
1
Because you're using innerHTML, which is the inner content of the table.
To get the whole table, including the table element, use outerHTML:
document.getElementById("signing").innerHTML=window.opener.document.getElementById("commentTable").outerHTML;
// >>----------------------------------------------------------------------------------------------^^^^^^^^^
Example:
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>But you don't need to go through markup (which requires [on getting] that the browser spin through the DOM structure building up an HTML string, and then [on setting] that it parse that string into a DOM structure), you could just copy the elements using cloneNode(true):
document.getElementById("signing").appendChild(
window.opener.document.getElementById("commentTable").cloneNode(true)
);
Example:
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>Side note: The font tag has been deprecated for over a decade. Use a span instead (usually with a class so styling is separate from content).
answered Nov 13 '18 at 9:10
T.J. CrowderT.J. Crowder
685k12112171311
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53277316%2fwhy-i-copy-a-table-and-head-infomation-lost%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Because you're using innerHTML, which is the inner content of the table.
To get the whole table, including the table element, use outerHTML:
document.getElementById("signing").innerHTML=window.opener.document.getElementById("commentTable").outerHTML;
// >>----------------------------------------------------------------------------------------------^^^^^^^^^
Example:
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>But you don't need to go through markup (which requires [on getting] that the browser spin through the DOM structure building up an HTML string, and then [on setting] that it parse that string into a DOM structure), you could just copy the elements using cloneNode(true):
document.getElementById("signing").appendChild(
window.opener.document.getElementById("commentTable").cloneNode(true)
);
Example:
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>Side note: The font tag has been deprecated for over a decade. Use a span instead (usually with a class so styling is separate from content).
answered Nov 13 '18 at 9:10
T.J. CrowderT.J. Crowder
685k12112171311
add a comment |
1
Because you're using innerHTML, which is the inner content of the table.
To get the whole table, including the table element, use outerHTML:
document.getElementById("signing").innerHTML=window.opener.document.getElementById("commentTable").outerHTML;
// >>----------------------------------------------------------------------------------------------^^^^^^^^^
Example:
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>But you don't need to go through markup (which requires [on getting] that the browser spin through the DOM structure building up an HTML string, and then [on setting] that it parse that string into a DOM structure), you could just copy the elements using cloneNode(true):
document.getElementById("signing").appendChild(
window.opener.document.getElementById("commentTable").cloneNode(true)
);
Example:
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>Side note: The font tag has been deprecated for over a decade. Use a span instead (usually with a class so styling is separate from content).
answered Nov 13 '18 at 9:10
T.J. CrowderT.J. Crowder
685k12112171311
add a comment |
1
1
1
Because you're using innerHTML, which is the inner content of the table.
To get the whole table, including the table element, use outerHTML:
document.getElementById("signing").innerHTML=window.opener.document.getElementById("commentTable").outerHTML;
// >>----------------------------------------------------------------------------------------------^^^^^^^^^
Example:
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>But you don't need to go through markup (which requires [on getting] that the browser spin through the DOM structure building up an HTML string, and then [on setting] that it parse that string into a DOM structure), you could just copy the elements using cloneNode(true):
document.getElementById("signing").appendChild(
window.opener.document.getElementById("commentTable").cloneNode(true)
);
Example:
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>Side note: The font tag has been deprecated for over a decade. Use a span instead (usually with a class so styling is separate from content).
answered Nov 13 '18 at 9:10
T.J. CrowderT.J. Crowder
685k12112171311
Because you're using innerHTML, which is the inner content of the table.
To get the whole table, including the table element, use outerHTML:
document.getElementById("signing").innerHTML=window.opener.document.getElementById("commentTable").outerHTML;
// >>----------------------------------------------------------------------------------------------^^^^^^^^^
Example:
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>But you don't need to go through markup (which requires [on getting] that the browser spin through the DOM structure building up an HTML string, and then [on setting] that it parse that string into a DOM structure), you could just copy the elements using cloneNode(true):
document.getElementById("signing").appendChild(
window.opener.document.getElementById("commentTable").cloneNode(true)
);
Example:
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>Side note: The font tag has been deprecated for over a decade. Use a span instead (usually with a class so styling is separate from content).
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>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>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>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>answered Nov 13 '18 at 9:10
T.J. CrowderT.J. Crowder
685k12112171311
edited Nov 13 '18 at 9:16
answered Nov 13 '18 at 9:10
T.J. CrowderT.J. Crowder
685k12112171311
answered Nov 13 '18 at 9:10
T.J. CrowderT.J. Crowder
685k12112171311
answered Nov 13 '18 at 9:10
T.J. CrowderT.J. Crowder
685k12112171311
685k12112171311
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53277316%2fwhy-i-copy-a-table-and-head-infomation-lost%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Hello! Do you want to display the table in a div with id of signing? I saw that you set the color for text to white. Try to use a background color to see the text. Try to use only document.getElementById for the right expression without window.opener.
– Andrei Ghervan
Nov 13 '18 at 9:26