Ne peut pas définir de innerHTML sur tbody dans IE

C'est vrai, innerHTML sur tbody éléments est en lecture seule dans IE

La propriété est en lecture/écriture pour tous
les objets à l'exception de ce qui suit,
qui il est en lecture seule: le COL, COLGROUP,
FRAMESET, HEAD, HTML, LE STYLE, LA TABLE,
TBODY, TFOOT, THEAD, DE TITRE, TR.

source: http://msdn.microsoft.com/en-us/library/ms533897(SV.85).aspx

Vous pouvez faire quelque chose comme cela pour le contourner:

function setTBodyInnerHTML(tbody, html) {
  var temp = tbody.ownerDocument.createElement('div');
  temp.innerHTML = '<table>' + html + '</table>';

  tbody.parentNode.replaceChild(temp.firstChild.firstChild, tbody);
}

Fondamentalement, il crée un temporaire nœud dans lequel vous injecter un plein table. Puis il remplace la tbody avec le tbody de la injecté table. Si elle s'avère être lent, vous pouvez le faire plus rapidement par la mise en cache temp au lieu de créer à chaque fois.

À la fois les réponses ci-dessus semblent un peu floues. De Plus, à la création de la div n'est jamais supprimé, de sorte que l'appel de ces fonctions à plusieurs reprises mange de la mémoire. Essayez ceci:

//this function must come before calling it to properly set “temp” 
function MSIEsetTBodyInnerHTML(tbody, html) { //fix MS Internet Exploder’s lameness
  var temp = MSIEsetTBodyInnerHTML.temp;
  temp.innerHTML = '<table><tbody>' + html + '</tbody></table>';
  tbody.parentNode.replaceChild(temp.firstChild.firstChild, tbody);  }
MSIEsetTBodyInnerHTML.temp = document.createElement('div');

if (navigator  &&  navigator.userAgent.match( /MSIE/i ))  
  MSIEsetTBodyInnerHTML(tbody, html);
else  //by specs, you can not use “innerHTML” until after the page is fully loaded  
  tbody.innerHTML=html;    

Même avec ce code, si, MSIE ne semble pas correctement re-taille de la table de cellules dans ma demande, mais je suis combler un vide tbody balise générée avec la variable de contenu, tandis que le thead cellules' colspan valeurs sont réglées à une valeur fixe: le nombre maximal de cellules qui peuvent être générés tbody. Tandis que la table tbody est de 50 cellules de large, seulement deux colonnes à afficher. Peut-être que si la table a été initialement rempli, et les cellules ont été remplacés par la même structure interne, cette méthode pourrait fonctionner. Google Chrome fait un excellent travail de reconstruction de la table, tandis que d'Opera navigateur de bureau peut redimensionner à plusieurs colonnes, mais si vous supprimez les colonnes, les autres largeurs de colonne reste limité, comme ils l'ont été; cependant, avec l'Opéra, en se cachant la table (display=none) puis re-montrer (affichage=tableau), la table tbody cellules de taille correctement. J'ai renoncé avec Firefox. C'est la MSIE 6 de 2012 - un cauchemar à développer pour qui doit avoir une annotation supplémentaire ajouté juste pour faire de HTML-CSS layouts travail, car il n'est pas conforme aux normes que même MSIE est maintenant. Donc je n'ai pas testé la tbody.innerHTML fonctionnement dans Firefox.

<table id="table">
<thead>
    <tr>
        <th colspan="1">a</th>
        <th colspan="3">b</th>
    </tr>
</thead>
<tbody id="replaceMe">
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
</tbody>
</table>
<button type="button" onclick="replaceTbody()">replaceTbody</button>
<script>
function $(id){ 
    return document.getElementById(id);
}

function replaceTbody(){
    var table = $('table');
    table.removeChild($('replaceMe'));
    var tbody = document.createElement("tbody");
    tbody.setAttribute("id","replaceMe");
    table.appendChild(tbody);

    var tr = document.createElement('tr');
    for(var i=1;i<5;i++){
        var td = document.createElement('td');
        td.innerHTML = 'newData' + i;
        tr.appendChild(td);
    }
    tbody.appendChild(tr);
}
</script>