<tr> क्लोन करें और <td> के अंदर

Question

के अंदर तत्वों के नाम विशेषता को भी बढ़ाएं, मुझे एक फॉर्म में 'नई पंक्ति जोड़ें' सुविधा लागू करना है। प्रपत्र की संरचना की तरह कुछ है:

<table> 
<tr> 
    <td><input type="text" name="v1[label]" /></td> 
    <td><input type="text" name="v1[observation]" /></td> 
    <td><input type="text" name="v1[remarks]" /></td> 
</tr> 
<tr> 
    <td><input type="text" name="v2[label]" /></td> 
    <td><input type="text" name="v2[observation]" /></td> 
    <td><input type="text" name="v2[remarks]" /></td> 
</tr> 
<tr> 
    <td colspan="3"> 
     <input type="button" id="addrow" value="Add One More Row">&nbsp; 
     <input type="submit" name="proceed" value="Submit" /> 
    </td> 
</tr> 
</table> 

के रूप में देखा जाता है, प्रत्येक पंक्ति के साथ, वहाँ v[] संख्या में वृद्धि हुई है। v1, v2..and तो

मैं किसके लिए

कर रही हूँ जब 'जोड़ें एक और पंक्ति' बटन क्लिक किया जाता है, तो निम्न बातें होती हैं चाहिए

• एक नई पंक्ति हो जाता है अंतिम पंक्ति के ऊपर ( बटन के साथ पंक्ति)
• नाम विशेषता मान 1 से बढ़ता है (यानी v2 [लेबल] v3 [लेबल] बन जाता है, v2 [अवलोकन] v3 [अवलोकन] और इसी तरह) पंक्ति

क्या मैं

निकटतम मैं करने के लिए jQuery'sclone() उपयोग कर रहा था आया था की कोशिश की। यह पूरी तरह से पंक्ति जोड़ता है। लेकिन मुझे बटन क्लिक होने पर प्रत्येक बार नाम विशेषता के मूल्य को बढ़ाने का तरीका ढूंढना मुश्किल लगता है।

jQuery वर्तमान में इस्तेमाल किया जा रहा

$('input:button[id="addrow"]').click(function(){ 

    var secondlast = $('table tr:last').prev('tr'); 
    secondlast.clone().insertBefore(secondlast); 

}); 

अगर मैं बटन दो बार क्लिक करें, मैं हो रही है निम्न HTML

<tr> 
    <td><input type="text" name="v2[label]" /></td> 
    <td><input type="text" name="v2[observation]" /></td> 
    <td><input type="text" name="v2[remarks]" /></td> 
</tr> 

<tr> 
    <td><input type="text" name="v2[label]" /></td> 
    <td><input type="text" name="v2[observation]" /></td> 
    <td><input type="text" name="v2[remarks]" /></td> 
</tr> 

तो एक पंक्ति जोड़ा जा रहा है जोड़ा है, लेकिन नाम विशेषता v2 पर बनी हुई है, जबकि यह तीसरी और चौथी पंक्ति के लिए v3 और v4 होना चाहिए। मैं समझता हूं कि clone() ऐसा नहीं कर सकता है और इसलिए मैं एक विकल्प की तलाश में हूं।

Answer 1

$('input:button[id="addrow"]').click(function(){ 
    var secondlast = $('table tr:last').prev('tr'); 
    var newClone = secondlast.clone(); 
    // find all the inputs within your new clone and for each one of those 
    newClone.find('input').each(function() { 
     var currentNameAttr = $(this).attr('name'); // get the current name attribute 
     // construct a new name attribute using regular expressions 
     // the match is divided into three groups (indicated by parentheses) 
     // p1 will be 'v', p2 will be the number, p3 will be the remainder of the string 
     var newNameAttr = currentNameAttr.replace(/^(v)(\d+)(.*)$/, function(match, p1, p2, p3) { 
      return p1+(parseInt(p2)+1)+p3; 
     }); 
     $(this).attr('name', newNameAttr); // set the incremented name attribute 
    }); 
    // insert after is I assume what you want 
    newClone.insertAfter(secondlast); 
}); 

संपादित

// you could also simply increment any digit you find as Batman indicated 
var newNameAttr = currentNameAttr.replace(/\d+/, function(match) { 
    return (parseInt(match)+1); 
}); 

Answer 2

यदि आपको किसी सर्वर पर उन इनपुट में डेटा भेजने की आवश्यकता है, तो यह निर्धारित करना मुश्किल होगा कि आपको कितने वी * लेना है ... इसके बजाय, मेरा सुझाव है कि आप सरणी में लाइन जोड़ने के लिए [] का उपयोग करें।

आपका HTML कि ऐसा दिखाई देगा:

<table> 
<tr> 
    <td><input type="text" name="v[label][]" /></td> 
    <td><input type="text" name="v[observation][]" /></td> 
    <td><input type="text" name="v[remarks][]" /></td> 
</tr> 
<tr> 
    <td><input type="text" name="v[label][]" /></td> 
    <td><input type="text" name="v[observation][]" /></td> 
    <td><input type="text" name="v[remarks][]" /></td> 
</tr> 
<tr> 
    <td colspan="3"> 
     <input type="button" id="addrow" value="Add One More Row">&nbsp; 
     <input type="submit" name="proceed" value="Submit" /> 
    </td> 
</tr> 
</table> 

पोस्ट चर अनूठा होगा: v और यह पाश करने के लिए आसान के माध्यम से डेटा हड़पने के लिए किया जाएगा, यहाँ एक PHP उदाहरण है।

foreach($_POST['v']['label'] as $k=>$v){ 
    $_POST['v']['label'][$k]; // label 
    $_POST['v']['observation'][$k]; // label 
    $_POST['v']['remarks'][$k]; // label 
} 

यह आदानों, कोई प्रसंस्करण और प्रत्येक क्लोन के लिए नामों की reformatting और उपयोग में आसान के एक असीमित संख्या के लिए अनुमति देता है।