Cloning last three rows and incrementing multidimensional input names?

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 http://jsfiddle.net/5ntbg/1/

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:
  1. title[0][subtitle][0]
     is cloned as
  1. title[0][subtitle][1]
and
  1. title[0][subtext][0]
is cloned as
  1. 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)
  1. <div class="ttables">
  2. <table cellspacing="0" cellpadding="0" class="title-form">
  3.     <thead>
  4.         <tr><th><label>Title</label></th></tr>
  5.     </thead>
  6.     <tbody>
  7.         <tr><td><input type="title" class="form-text" value="" name="title[0]"></td></tr>
  8.         <tr class="subtitle-container"><td>
  9.             <table cellspacing="0" cellpadding="0" class="subtitle-form">
  10.             <tbody>
  11.            
  12.             <tr><td><label>Subtitle</label><input type="subtitle" class="form-text" value="" name="title[0][subtitle][0]"></td></tr>
  13.             <tr><td><label>Subtext</label><textarea class="form-textarea subtext" name="title[0][subtext][0]"></textarea></td></tr>
  14.             <tr class="rowspacer"><td></td></tr>
  15.            
  16.             </tbody>
  17.             <tfoot>
  18.                 <tr><td><button class="faux-button" id="newsubtitle">Add subtitle</button></td></tr>
  19.             </tfoot>
  20.             </table>
  21.         </td></tr>
  22.     </tbody>
  23.    
  24.     <tfoot>
  25.         <tr><td><button class="faux-button" id="newtitle">Add title</button></td></tr>
  26.     </tfoot>
  27. </table>
  28. </div>
  29. //js
  30. $('#newsubtitle').live('click', function(e) {
  31.    e.preventDefault();
  32.    
  33.     var numrows = $(this).closest('table').find(' tbody > tr').length;
  34.    
  35.     $(this).closest('table').find(' tbody > tr:gt('+ (numrows-3) +')')
  36.         .clone()
  37.         .find(':input')
  38.         .each(function() {
  39.             this.name = this.name.replace(/\[(\d+)\]/, function(str,p1){
  40.                 return '[' + (parseInt(p1,10)+1) + ']';
  41.             });
  42.         })
  43.         .end()
  44.         .appendTo($(this).closest('table > tbody'))
  45.         });  
  46.    
  47.     $('#newtitle').live('click', function(e) {
  48.        e.preventDefault();
  49. var numtable = $('table.title-form').length;
  50.         $('table.title-form:first')
  51. .clone()
  52.             .find(':input')
  53.         .each(function() {
  54.             this.name = this.name.replace(/\[(\d+)\]/, function(str,p1){
  55.                 return '[' + (parseInt(p1,10)+1) + ']';
  56.             });
  57.         })
  58.         .end()
  59. .appendTo('.ttables')
  60.     });


















    • Topic Participants

    • dev5