जावास्क्रिप्ट के साथ एक टेबल पंक्ति (<TR>) में सामग्री जोड़ना?

Question

मेरे पास एक सारणी निम्नानुसार है:

<table> 
<tr> 
    <td>col 1</td><td>col2</td> 
</tr> 
<tr id="insert"> 
    <td>field</td><td>Field 2</td> 
</tr> 
<tr> 
    <td>another field</td><td>one more field</td> 
</tr> 
</table> 

अब समस्या यह है कि मुझे मध्य पंक्ति (आईडी = डालने) के बाद नई पंक्तियों को गतिशील रूप से डालने की आवश्यकता है। तत्वों को सम्मिलित करने के लिए मेरे पास एक कस्टम जावास्क्रिप्ट फ़ंक्शन है, किसी तत्व का उपयोग करके तत्व को अगले तत्व पर कॉल करने से पहले।

नई पंक्तियां निम्नलिखित जावास्क्रिप्ट का सफलतापूर्वक उपयोग कर रही हैं:

var new_row = document.createElement('tr'); 
new_row.innerHTML="<td>test</td>"; 
insertAfter(document.getElementById("insert"), new_row); 

हालांकि, नई पंक्ति आंतरिक HTML का उपयोग करके किसी भी साधारण HTML स्वरूपण को स्वीकार करने से इंकार कर देती है। नई पंक्ति का अंतिम आउटपुट कुछ ऐसा दिखता है:

<tr>test</tr> 

आप देखते हैं कि यह निर्दिष्ट नहीं है कि मैंने निर्दिष्ट किया है। वास्तविक लिपि बहुत जटिल है और दुर्भाग्यवश मैन्युअल रूप से एक एपेंड का उपयोग करके प्रत्येक को जोड़ना चाइल्ड या इसी तरह का फ़ंक्शन बहुत समय लेने वाला और संभवतः संसाधन गहन होगा। क्या वैसे भी मैं इस तालिका पंक्ति में 'एचटीएमएल का हिस्सा' जोड़ सकता हूं और इस खंड में टेबल कॉलम को परिभाषित करता हूं?

मैं परेशान हूं, किसी भी मदद की बहुत सराहना की है।

Answer 1

आप कोशिकाओं को सम्मिलित करने के लिए मूल insertCell() विधि का उपयोग कर सकते हैं।

इस आजमाएँ:

उदाहरण:http://jsfiddle.net/VzTJa/

var new_row = document.createElement('tr'); 
new_row.insertCell(0).innerHTML = "test"; 
new_row.insertCell(1).innerHTML = "test2"; 

या आप के रूप में अच्छी insertRow() का उपयोग करके अपने insertAfter() समारोह के बिना इसे पूरा कर सकते हैं।

उदाहरण:http://jsfiddle.net/VzTJa/1/

var insert = document.getElementById("insert"); 
var new_row = insert.parentNode.insertRow(insert.rowIndex + 1); 
new_row.insertCell(0).innerHTML = "test"; 
new_row.insertCell(1).innerHTML = "test2"; 

---

इस समाधान का आजमाएँ:

उदाहरण:http://jsfiddle.net/VzTJa/2/

var temp = '<table><tbody><tr>'; 
var close_temp = '</tr></tbody></table>'; 
var temp_div = document.createElement('div'); 


var html_to_insert = '<td>tester</td><td>tester</td>'; 

temp_div.innerHTML = temp + html_to_insert + close_temp; 
insertAfter(document.getElementById("insert"), temp_div.firstChild.firstChild.firstChild); 

temp_div.removeChild(temp_div.firstChild); 

मूल रूप से बनाता है एक मेज के उद्घाटन और समापन टैग का प्रतिनिधित्व करने वाले दो तार। आप इसे अपनी सामग्री से जोड़ते हैं, और अस्थायी div के innerHTMl के रूप में सेट करते हैं, फिर अपनी इच्छित पंक्ति प्राप्त करते हैं, और .appendChild() करते हैं।

एक बेहतर तरीका हो सकता है, या आप इसे बेहतर बनाने का एक तरीका ढूंढ सकते हैं।

मैं उस व्यक्ति से this article में एक समाधान पर चमकने के बाद इसके साथ आया जो जाहिर तौर पर आईई पर काम करता था और आंशिक रूप से पार्सर के लिए जिम्मेदार था।

Answer 2

यदि आप jQuery का उपयोग कर सकते हैं, तो उससे संलग्न विधि को आज़माएं। jQuery append reference

आप एक मुद्दा प्रदर्शन पाते हैं, तो आप से पहले गतिशील डोम आप जावास्क्रिप्ट में जोड़ना चाहते हैं का निर्माण वास्तविक HTML DOM एलीमेंट यह जाहिर कर देंगे करने के लिए इसे जोड़कर एक सुधार हो सकता है। यह आपकी संख्याओं की संख्या को कम से कम रखेगा।