क्लोन टेबल पंक्ति

Question

मैं जावास्क्रिप्ट का उपयोग कैसे कर सकता हूं (मुझे लगता है) एक टेबल पंक्ति क्लोन करने के लिए नीचे दी गई तस्वीर में खूबसूरती से चित्रित किया गया है?

clone row http://i28.tinypic.com/2yyuz61.png

Answer 1

आप सभी बटन के लिए एक लाइव इवेंट जोड़ने का काम कर सकते हैं। उदाहरण के लिए यदि आप उन्हें क्लोन का एक वर्ग देते हैं तो निम्नलिखित काम करेंगे।

$('input.clone').live('click', function(){ 
    //put jquery this context into a var 
    var $btn = $(this); 
    //use .closest() to navigate from the buttno to the closest row and clone it 
    var $clonedRow = $btn.closest('tr').clone(); 
    //append the cloned row to end of the table 

    //clean ids if you need to 
    $clonedRow.find('*').andSelf().filter('[id]').each(function(){ 
     //clear id or change to something else 
     this.id += '_clone'; 
    }); 

    //finally append new row to end of table 
    $btn.closest('tbody').append($clonedRow); 
}); 

कृपया ध्यान दें: आप आईडी के साथ तालिका पंक्ति में तत्वों है, तो आप उन के माध्यम से एक चाहते प्रत्येक करते हैं और उन्हें एक नया मान पर सेट करने की आवश्यकता होगी अन्यथा आप डुप्लिकेट आईडी में के साथ खत्म हो जाएगा डोम जो मान्य नहीं है और jQuery चयनकर्ताओं के साथ कहर खेल सकते हैं

तुम इतनी

Answer 2

की तरह यह कर सकते हैं आप एक बहुत सरल समाधान चाहते हैं, बस innerHTML का उपयोग करें:

var html = document.getElementById("the row").innerHTML; 

var row = document.createElement('p'); 

row.innerHTML= html; 

document.getElementById("table id").appendChild(row); 

Answer 3

आप किस उद्देश्य के लिए डेटा का उपयोग करना चाहते हैं? मैंने पहले डेटा इनपुट फॉर्मों पर समान चीजें की हैं और आम तौर पर मैंने उपयोगकर्ताओं को जावास्क्रिप्ट में सबकुछ में हेरफेर नहीं करने के लिए फायदेमंद पाया है, लेकिन सर्वर पर डेटा स्टोर करने और AJAX के साथ इंटरफ़ेस को स्टोर करने के लिए हुक करने के लिए।

समस्या यह है कि जैसे ही आप उपयोगकर्ताओं को इस तरह के जटिल टेबल मैनिपुलेशन करते हैं, और वे गलती से बैक बटन दबाते हैं जो आप बहुत असंतुष्ट पंटर्स के साथ समाप्त होते हैं। डेटाबेस पर क्षणिक भंडारण को कोड करना जावास्क्रिप्ट में हेरफेर करने से कहीं अधिक कठिन नहीं है और वास्तव में आसान हो सकता है क्योंकि आप ऑपरेशन को और आसानी से तोड़ सकते हैं। डीबगिंग भी उस कारण से आसान है (आप हमेशा अपनी तालिका की वर्तमान स्थिति तक पहुंच का निरीक्षण करते हैं)।

AJAX के माध्यम से हैंडलिंग के लिए बहुत सारे विकल्प - केवल स्थान-धारक विभाजन का उपयोग करने और आवश्यकतानुसार पूरी तालिका संरचना को खिलाने के लिए सबसे आसान विकल्प है।

Answer 4

एक jQuery उदाहरण:

$(document).ready(function(){ 
    $('TABLE.recs').delegate('INPUT.clone','click',function(e){ 
    e.preventDefault(); 
    var s = $(this).parent().parent().clone().wrap('<div>').parent().html(); 
    $('TABLE.recs TBODY TR:last').after(s); 
    }); 
});