Wstawianie numeru

Question

Chcę wstawić znacznik th wewnątrz elementu tr z elementu thead tabeli. Używam metody wiersza obiektu insertCell utworzonej pod table.tHead, która faktycznie wstawia td. Czy istnieje jakieś rozwiązanie JavaScript bez korzystania z biblioteki JS?

Aktualizacja Obecnie używam coś samo jak rozwiązanie dostarczone przez Minko Gechev i gaurav. Chcę wiedzieć, czy istnieje jakieś czyste rozwiązanie, takie jak przy użyciu insertCell?

Answer 1

Możesz to zrobić za pomocą wanilii JavaScript. Spróbuj tego:

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); 

Oto przykład http://codepen.io/anon/pen/Bgwuf

Answer 2

Zamiast tego należy użyć metody table.tHead.children[0].appendChild(document.createElement("th")). Zasadniczo musisz utworzyć th w czasie wykonywania i wstawić go do swojego rdzenia.

Answer 3

Można również użyć metody insertCell jak pierwotnie wymagane. Po prostu trzeba zmienić outerHTML nadpisać <td> stworzony metodą insertCell:

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

pasujące przykład podać:

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 

Answer 4

Możesz dodać tę funkcjonalność do natywnego HTMLTableRowElement zmieniając To prototyp:

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); 

Po uruchomieniu tego kodu, wszelkie nowe HTMLTableRowElements („TD” tagi) sprawdza, czy rodzic jest tag thead. Jeśli tak, to wykona tę samą funkcjonalność co insertCell, ale zamiast tego użyje tagu th. Jeśli nie, po prostu użyje oryginalnej funkcji insertCell.

Zauważ, że it is generally not recommended to extend the native objects.