2010-02-24 18 views
5

निम्न कोड क्यों काम नहीं करता है?नई तालिका बनाने के लिए createElement का उपयोग कैसे करें?

<html> 
<head> 
    <script type="text/javascript"> 
    function addTable() { 
     var table = document.createElement('table'); 
     table.innerHTML = "<tr><td>123</td><td>456</td></tr>"; 
     document.getElementById("addtable").appendChild(table); 
    } 
    </script> 
</head> 
<body> 
    <input type="submit" value="New Table" onClick="addTable()"/> 
    <div id="addtable"></div> 
</body> 
</html> 

उत्तर

21

मेरी जानकारी के अनुसार करने के लिए, एक table तत्व या तालिका खंड तत्व के innerHTML संपत्ति (जैसे tbody या thead) की स्थापना इंटरनेट एक्सप्लोरर (संपादित करें पर काम नहीं करता: मैं बस की जाँच की - ietester और सादे IE8 के साथ परिणाम आईई 6 और आईई 8 के लिए "अज्ञात रनटाइम त्रुटि" है, और यह आईई 7 को दुर्घटनाग्रस्त करता है लेकिन यह एक आईटेस्टर विशिष्ट समस्या हो सकता है)।

एक तालिका में पंक्तियां जोड़ने एक मेज या मेज खंड तत्व पर insertRow() विधि का उपयोग किया जाता है की DOM standard रास्ता (कि डोम कल्पना में HTMLTableElement और HTMLTableSectionElement के लिए देखो):

<script type="text/javascript"> 
function addTable() { 
    var c, r, t; 
    t = document.createElement('table'); 
    r = t.insertRow(0); 
    c = r.insertCell(0); 
    c.innerHTML = 123; 
    c = r.insertCell(1); 
    c.innerHTML = 456; 
    document.getElementById("addtable").appendChild(t); 
} 
</script> 

स्क्रिप्ट में, वहाँ है कोई स्पष्ट तालिका खंड नहीं बनाया जा रहा है। AFAIK, एक टीबीओडीवाई स्वचालित रूप से बनाया जाता है, और वहां पंक्तियां डाली जाती हैं।

संपादित करें: आईई के संबंध में, मुझे यह इंगित करना चाहिए कि आप innerHTML संपत्ति सेट करके सामग्री के साथ एक तालिका जोड़ सकते हैं, लेकिन जिस HTML में आप इंजेक्ट करते हैं वह एक पूर्ण तालिका होनी चाहिए। तो यह काम करता है, यहां तक ​​कि आईई पर भी:

<script type="text/javascript"> 
function addTable() { 
    var html = "<table><tr><td>123</td><td>456</td></tr></table>"; 
    document.getElementById("addtable").innerHTML = html; 
} 
</script> 
+0

हां, दरअसल, यह रनटाइम त्रुटि फेंकता है! हमें इस विधि से जाना चाहिए, या पारंपरिक रूप से सभी टैब, टीआर और टीडी के लिए चक्र बनाना/जोड़ना चाहिए। – vpram86

+2

+1 सभी खातों पर सही। 'आंतरिक HTML' केवल आईई में 'table' और' tbody' के लिए पढ़ा जाता है। –

+0

या, टीई आईई में काम नहीं करता है। लेकिन आपके द्वारा दिया गया कोड भी काम नहीं कर रहा है ... – yeeen

संबंधित मुद्दे