थैड

Question

में वें डालें I तालिका के तत्व के अंदर th टैग डालना चाहते हैं। मैं table.tHead के तहत बनाए गए पंक्ति ऑब्जेक्ट की विधि का उपयोग कर रहा हूं, जो वास्तव में td डालने वाला है। क्या किसी जेएस लाइब्रेरी का उपयोग किए बिना कोई जावास्क्रिप्ट समाधान है?

अद्यतन वर्तमान में मैं कुछ Minko Gechev और gaurav द्वारा प्रदान समाधान के रूप में ही उपयोग कर रहा हूँ। मैं जानना चाहता हूं कि insertCell का उपयोग करने जैसे कोई साफ समाधान है या नहीं?

Answer 1

आप इसे वेनिला जावास्क्रिप्ट के साथ कर सकते हैं। इस प्रयास करें:

एचटीएमएल

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

जावास्क्रिप्ट

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

यहाँ एक उदाहरण http://codepen.io/anon/pen/Bgwuf

Answer 2

इसके बजाय table.tHead.children[0].appendChild(document.createElement("th")) विधि का उपयोग करें। असल में आपको रनटाइम पर th बनाना होगा और इसे अपने थैड में डालना होगा।

Answer 3

के रूप में मूल रूप से अनुरोधित तुम भी insertCell विधि का उपयोग कर सकते हैं।

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

उदाहरण दिए गए मेल करने के लिए:

एचटीएमएल

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

जावास्क्रिप्ट

तुम बस outerHTML <td> insertCell विधि से बनाया अधिलेखित करने के लिए बदलना होगा

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

Answer 4

आप इसे के प्रोटोटाइप को बदलने के द्वारा देशी HTMLTableRowElement को यह कार्यक्षमता जोड़ सकते हैं:

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

के बाद इस कोड चलता है, किसी भी नए HTMLTableRowElements ("td" टैग) यदि माता-पिता एक thead टैग है देखने के लिए जाँच करेगा। यदि ऐसा है, तो यह insertCell के समान कार्यक्षमता करेगा, लेकिन इसके बजाय एक वें टैग का उपयोग करेगा। यदि नहीं, तो यह केवल मूल insertCell कार्यक्षमता का उपयोग करेगा।

ध्यान दें कि it is generally not recommended to extend the native objects.