troubleshooting Question

jQuery: Cloning last three rows and incrementing multidimensional input names?

Avatar of n00b0101
n00b0101 asked on
jQueryJavaScript
2 Comments1 Solution619 ViewsLast Modified:
Having a hard time figuring this one out...

I am attempting to clone the last three rows of a table while also incrementing the names of the inputs, which are arrays.  

(I've put the code on jsfiddle jsfiddle)

To be clear, once the user clicks the "newissue" button, the following should happen:

(1) The last three rows of the button's parent table (i.e., table.subtitle-form) are cloned and appended to the table.subtitle-form

(2) The names of the inputs should be incremented appropriately:
title[0][subtitle][0] 
is cloned as
 title[0][subtitle][1] 

and

title[0][subtext][0]
is cloned as
title[0][subtext][1]

(I have the parent table cloning working as seen at the fiddle link, it's just the inner table that I'm having an issue with...)

(code also posted below)
// HTML
<div class="ttables">
<table cellspacing="0" cellpadding="0" class="title-form">
    <thead>
        <tr><th><label>Title</label></th></tr>
    </thead>

    <tbody>
        <tr><td><input type="title" class="form-text" value="" name="title[0]"></td></tr>
        <tr class="subtitle-container"><td>
            <table cellspacing="0" cellpadding="0" class="subtitle-form">
            <tbody>
            
            <tr><td><label>Subtitle</label><input type="subtitle" class="form-text" value="" name="title[0][subtitle][0]"></td></tr>
            <tr><td><label>Subtext</label><textarea class="form-textarea subtext" name="title[0][subtext][0]"></textarea></td></tr>
            <tr class="rowspacer"><td></td></tr>
            
            </tbody>
            <tfoot>
                <tr><td><button class="faux-button" id="newsubtitle">Add subtitle</button></td></tr>
            </tfoot>
            </table>
        </td></tr>
    </tbody>
    
    <tfoot>
        <tr><td><button class="faux-button" id="newtitle">Add title</button></td></tr>
    </tfoot>
</table>
</div>

//js
$('#newsubtitle').live('click', function(e) {
   e.preventDefault();
    
    var numrows = $(this).closest('table').find(' tbody > tr').length;
    
    $(this).closest('table').find(' tbody > tr:gt('+ (numrows-3) +')')
        .clone()
        .find(':input')
        .each(function() {
            this.name = this.name.replace(/\[(\d+)\]/, function(str,p1){
                return '[' + (parseInt(p1,10)+1) + ']';
            });
        })
        .end()
        .appendTo($(this).closest('table > tbody'))
        });   
    
    $('#newtitle').live('click', function(e) {
       e.preventDefault();

var numtable = $('table.title-form').length;
        $('table.title-form:first')
.clone()
            .find(':input')
        .each(function() {
            this.name = this.name.replace(/\[(\d+)\]/, function(str,p1){
                return '[' + (parseInt(p1,10)+1) + ']';
            });
        })
        .end()
.appendTo('.ttables')
    });
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros