javascript - Copy the content of one table into another - Stack Overflow

admin管理员组

文章数量:1291050

In my current application i need to copy the content of one table into another... With setting innerHTML it works perfectly in FF... but not in IE8... Here is the Code i used to copy in FF:

getID("tableA").innerHTML = getID("tableB").innerHTML;
// getID is a custom function i wrote to provide a shorter version of document.getElementById();

TableA is empty (only the tbody tag exists). TableB is looking like this:

table
  tbody
    tr
      td "Content" /td
      td "Content" /td
    /tr
  /tbody
/table

I already tried using nodeValue.. or appendData... or outerHTML.. but nothing really worked...

In my current application i need to copy the content of one table into another... With setting innerHTML it works perfectly in FF... but not in IE8... Here is the Code i used to copy in FF:

getID("tableA").innerHTML = getID("tableB").innerHTML;
// getID is a custom function i wrote to provide a shorter version of document.getElementById();

TableA is empty (only the tbody tag exists). TableB is looking like this:

table
  tbody
    tr
      td "Content" /td
      td "Content" /td
    /tr
  /tbody
/table

I already tried using nodeValue.. or appendData... or outerHTML.. but nothing really worked...

• javascript
• html
• internet-explorer-8

Share Improve this question Follow asked Apr 21, 2009 at 8:16 SvenFinkeSvenFinke 1,25433 gold badges1515 silver badges3030 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Internet Explorer doesn't let you edit the inside of tables with innerHTML - it is all or nothing.

Since you are trying to use innerHTML to copy the information, a plete copy should be safe (i.e. not have any id attributes that might bee duplicated), in which case I would do this:

var source = document.getElementById('tableA');
var destination = document.getElementById('tableB');
var copy = source.cloneNode(true);
copy.setAttribute('id', 'tableB');
destination.parentNode.replaceChild(copy, destination);

I'm kind of surprised to learn this didn't get fixed for IE 8. Geez, talk about dragging your feet. This is an intentional omission in Internet Explorer's implementation of innerHTML — you can't set innerHTML in a table. The creator of the feature has offered an explanation and a workaround. Basically, you can get hold of an actual tbody node and use replaceChild() to turn the original table's tbody into that.

本文标签： javascriptCopy the content of one table into anotherStack Overflow