Chèn th thead

Question

Tôi muốn chèn một thẻ th vào bên trong tr của thead phần tử của bảng. Tôi đang sử dụng phương pháp insertCell của đối tượng hàng được tạo theo table.tHead, thực tế là chèn td. Có giải pháp JavaScript nào không sử dụng bất kỳ thư viện JS nào không?

Cập nhật Hiện nay tôi đang sử dụng một cái gì đó tương tự như giải pháp được cung cấp bởi Minko Gechev và gaurav. Tôi muốn biết nếu có bất kỳ giải pháp sạch như sử dụng insertCell?

Answer 1

Bạn có thể làm điều đó với JavaScript vani. Hãy thử điều này:

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

Dưới đây là một ví dụ http://codepen.io/anon/pen/Bgwuf

Answer 2

Sử dụng phương pháp table.tHead.children[0].appendChild(document.createElement("th")) để thay thế. Về cơ bản, bạn phải tạo một th khi chạy và chèn nó vào thead của bạn.

Answer 3

Bạn cũng có thể sử dụng phương pháp insertCell theo yêu cầu ban đầu. Bạn chỉ cần phải thay đổi outerHTML ghi đè lên <td> tạo theo phương pháp insertCell:

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

Để phù hợp với ví dụ đưa ra:

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

Bạn có thể thêm chức năng này vào các HTMLTableRowElement bản địa bằng cách thay đổi nó nguyên mẫu:

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

Sau khi mã này được chạy, bất kỳ HTMLTableRowElements mới ("td" thẻ) sẽ kiểm tra xem nếu phụ huynh là một thẻ thead. Nếu vậy, nó sẽ thực hiện chức năng tương tự như insertCell, nhưng thay vào đó, sử dụng thẻ thứ. Nếu không, nó sẽ chỉ sử dụng chức năng insertCell gốc.

Lưu ý rằng it is generally not recommended to extend the native objects.