web-dev-qa-db-fra.com

Insérer le th dans la tête

Je souhaite insérer une balise th dans l'élément tr of thead d'une table. J'utilise la méthode insertCell de l'objet row créé sous table.tHead, qui insère en fait td. Existe-t-il une solution JavaScript sans utiliser de bibliothèque JS?

Mise à jour Actuellement, j'utilise quelque chose de similaire à la solution fournie par Minko Gechev et gaurav . Je veux savoir s'il existe une solution propre, telle que l'utilisation de insertCell?

javascripthtml-table
20
Moazzam Khan

Vous pouvez le faire avec JavaScript vanille. Essaye ça:

HTML

<table id="table">
  <thead>
    <tr>
      <th>First</th>
    </tr>
  <thead>
</table>

JavaScript

var tr = document.getElementById('table').tHead.children[0],
    th = document.createElement('th');
th.innerHTML = "Second";
tr.appendChild(th);

Voici un exemple http://codepen.io/anon/pen/Bgwuf

11
Minko Gechev

Vous pouvez également utiliser la méthode insertCell telle que demandée à l'origine. Il vous suffit de changer le fichier outerHTML pour écraser le <td> créé par la méthode insertCell:

var table = document.createElement("TABLE")
var row   = table.insertRow(0);
    row.insertCell(0).outerHTML = "<th>First</th>";  // rather than innerHTML

Pour correspondre à l'exemple donné:

HTML

<table id="table">
  <thead>
    <tr>
      <th>First</th>
    </tr>
  <thead>
</table>

Javascript 

var tr = document.getElementById('table').tHead.children[0];
    tr.insertCell(1).outerHTML = "<th>Second</th>"  // some browsers require the index parm -- 1
20
steven

Utilisez la méthode table.tHead.children[0].appendChild(document.createElement("th")) à la place. Fondamentalement, vous devez créer une th au moment de l'exécution et l'insérer dans votre thead.

7
Gaurav Pandey

Vous pouvez ajouter cette fonctionnalité à HTMLTableRowElement en modifiant son prototype:

HTMLTableRowElement.prototype.insertCell = (function(oldInsertCell) {
    return function(index) {
        if (this.parentElement.tagName.toUpperCase() == "THEAD") {
            if (index < -1 || index > this.cells.length) {
                // This case is suppose to throw a DOMException, but we can't construct one
                // Just let the real function do it.
            } else {
                let th = document.createElement("TH");
                if (arguments.length == 0 || index == -1 || index == this.cells.length) {
                    return this.appendChild(th);
                } else {
                    return this.insertBefore(th, this.children[index]);
                }
            }
        }
        return oldInsertCell.apply(this, arguments);
    }
})(HTMLTableRowElement.prototype.insertCell);

Une fois ce code exécuté, tout nouveau HTMLTableRowElements (balises "td") vérifie si le parent est une balise thead. Si tel est le cas, il aura la même fonctionnalité que insertCell, mais en utilisant une balise th à la place. Sinon, il utilisera simplement la fonctionnalité insertCell d'origine.

document.querySelector("thead > tr").insertCell(); // inserts a th into a tr inside a thead
document.querySelector(":not(thead) > tr").insertCell(); // inserts a td into a tr not inside a thead

Notez que il est généralement pas recommandé d'étendre les objets natifs.

0
Jonathan Gawrych