Avatar of n00b0101
n00b0101
 asked on

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

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] 

Open in new window

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

Open in new window


and

title[0][subtext][0]

Open in new window

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

Open in new window


(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')
    });

Open in new window

jQueryJavaScript

Avatar of undefined
Last Comment
n00b0101

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
n00b0101

ASKER
Thanks for this... I ultimately decided to use get and build the form in php then return it and append it to the table... Not sure if it was the best way to do it, but it worked!
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy