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

Question

मेरे पास अंत में एक जोड़ें बटन वाला एक टेबल है। जब आप इस बटन पर क्लिक करते हैं तो मैं वर्तमान में नीचे एक नई टेबल पंक्ति बनना चाहता हूं। मैं यह भी चाहता हूं कि इस पंक्ति पर इनपुट फ़ील्ड रिक्त हों। मैं .clone() का उपयोग करके ऐसा करने की कोशिश कर रहा हूं लेकिन यह पृष्ठ पर सभी पंक्तियों को क्लोन करता है। कृपया मदद करे। धन्यवाद

स्क्रिप्ट

$("input.tr_clone_add") 
     .live('click', function(){ 
       $(this).closest('.tr_clone') 
        .clone() 
        .insertAfter(".tr_clone") 
     }); 

एचटीएमएल

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data"> 
<tr> 
<td>Name</td> 
<td>Location</td> 
<td>From</td> 
<td>To</td> 
<td>Add</td> 
</tr> 
<tr class="tr_clone"> 
<td><input type="text" autofocus placeholder="who" name="who" ></td> 
<td><input type="text" autofocus placeholder="location" name="location" ></td> 
<td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td> 
<td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td> 
<td><input type="button" name="add" value="Add" class="tr_clone_add"></td> 
</tr> 
</table><!-- /table#table-data --> 

Answer 1

आपकी समस्या यह है कि आपके insertAfter:

.insertAfter(".tr_clone") 

हर .tr_clone के बाद आवेषण:

तत्वों के मिलान किए गए सेट को इस पैरामीटर द्वारा निर्दिष्ट तत्व (नों) के बाद डाला जाएगा।

शायद आप डुप्लिकेट कर रहे पंक्ति पर after का उपयोग करना चाहते हैं। और थोड़ा .find(':text').val('') क्लोन टेक्स्ट इनपुट साफ़ करेगा; कुछ इस तरह:

var $tr = $(this).closest('.tr_clone'); 
var $clone = $tr.clone(); 
$clone.find(':text').val(''); 
$tr.after($clone); 

डेमो: http://jsfiddle.net/ambiguous/LAECx/

मुझे यकीन है कि जो इनपुट ध्यान देने के साथ खत्म हो जाना चाहिए ताकि मुझे लगता है कि अकेले छोड़ दिया है नहीं कर रहा हूँ।

Answer 2

ये रहा:

$(table).delegate('.tr_clone_add', 'click', function() { 
    var thisRow = $(this).closest('tr')[0]; 
    $(thisRow).clone().insertAfter(thisRow).find('input:text').val(''); 
}); 

लाइव डेमो:http://jsfiddle.net/RhjxK/4/

---

अद्यतन: jQuery में घटनाओं सौंपने का नया तरीका है

$(table).on('click', '.tr_clone_add', function() { … }); 

Answer 3

इस प्रयास करें v ariation:

$(".tr_clone_add").live('click', CloneRow); 

function CloneRow() 
{ 
    $(this).closest('.tr_clone').clone().insertAfter(".tr_clone:last"); 
} 

Answer 4

कोड नीचे अंतिम पंक्ति क्लोन और तालिका में अंतिम पंक्ति के बाद जोड़ देगा:

var $tableBody = $('#tbl').find("tbody"), 
$trLast = $tableBody.find("tr:last"), 
$trNew = $trLast.clone(); 

$trLast.after($trNew); 

कार्य उदाहरण: http://jsfiddle.net/kQpfE/2/

Answer 5

इस प्रयास करें।

एचटीएमएल

<!-- Your table --> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Location</th> 
      <th>From</th> 
      <th>To</th> 
      <th>Add</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="text" autofocus placeholder="who" name="who" ></td> 
      <td><input type="text" autofocus placeholder="location" name="location" ></td> 
      <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td> 
      <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td> 
      <td><input type="button" name="add" value="Add" class="tr_clone_add"></td> 
     </tr> 
    <tbody> 
</table> 

<!-- Model of new row --> 
<table id="new-row-model" style="display: none"> 
    <tbody> 
     <tr> 
      <td><input type="text" autofocus placeholder="who" name="who" ></td> 
      <td><input type="text" autofocus placeholder="location" name="location" ></td> 
      <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td> 
      <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td> 
      <td><input type="button" name="add" value="Add" class="tr_clone_add"></td> 
     </tr> 
    <tbody> 
</table> 

स्क्रिप्ट

$("input.tr_clone_add").live('click', function(){ 
    var new_row = $("#new-row-model tbody").clone(); 
    $("#table-data tbody").append(new_row.html()); 
}); 

Answer 6

इस कोड का प्रयास करें, मैं क्लोनिंग और क्लोन तत्व को दूर करने के लिए निम्न कोड का इस्तेमाल किया, मैं भी नया वर्ग का इस्तेमाल किया है (newClass) जिसे स्वचालित रूप से टी के साथ जोड़ा जा सकता है वह हाल में एचटीएमएल

क्लोनिंग के लिए क्लोन ..

$(".tr_clone_add").live('click', function() { 
    var $tr = $(this).closest('.tr_clone'); 
    var newClass='newClass'; 
    var $clone = $tr.clone().addClass(newClass); 
    $clone.find(':text').val(''); 
    $tr.after($clone); 
}); 

क्लोन तत्व को हटाने के लिए।

$(".tr_clone_remove").live('click', function() { //Once remove button is clicked 
    $(".newClass:last").remove(); //Remove field html 
    x--; //Decrement field counter 
}); 

एचटीएमएल

<tr class="tr_clone"> 
         <!-- <td>1</td>--> 
         <td><input type="text" class="span12"></td> 
         <td><input type="text" class="span12"></td> 
         <td><input type="text" class="span12"></td> 
         <td><input type="text" class="span12"></td> 
         <td><input type="text" class="span10" readonly> 
         <span><a href="javascript:void(0);" class="tr_clone_add" title="Add field"><span><i class="icon-plus-sign"></i></span></a> <a href="javascript:void(0);" class="tr_clone_remove" title="Remove field"><span style="color: #D63939;"><i class="icon-remove-sign"></i></span></a> </span> </td> </tr>