需要修复用javascript追加的html和值

我有一个需要动态的表单，允许用户添加额外的结果，但需要与它相关的许多措施，如下所示： http ： //i.stack.imgur.com/EMcoa.png

以下是命名方案的草图： http ： //i55.tinypic.com/2s6rh4y.png

以下是某种工作forms的代码： http ： //jsfiddle.net/bkmorse/yNZcD/2/

我遇到的问题是使结果的名称和测量字段正确。

我需要第一个结果textarea命名： outcome[1] 。 每个额外的结果textarea应该是outcome[2], outcome[3]等等。

至于测量textareas，我需要它们这样命名： measure[1][0], measure[1][1], measure[1][2]等等。

度量textarea是这样命名的，因为它们将在插入数据库时​​通过循环运行，并且第一个索引号将与结果相关。

因此，当用户添加更多度量textareas时，索引应该增加，例如……

结果[2]，测量textarea： measure[2][0], measure[2][1] ，然后当他们点击插头符号时，它将创建一个新的测量textarea，名为measure[2][2] 。

当点击结果旁边的加号时也是如此，所以下一个结果textarea名称将是outcome[2] ，点击另一个结果它将是outcome[3] ，依此类推。

代码可以工作，但我只需要有人看一下并修改它，以便它具有我想要的名称方案。

Answer 1

好吧所以我在这里修改了分配代码是工作演示，通过使措施孩子的结果它将节省你在PHP方面解析。

我取出了模板部分中的名称以防止它们发布。

我复制了一个已经靠近的度量表并清除了值，因为它不需要重新编号，因为它已经被正确命名。

我还强烈建议你拿出br span和strong标签那些应该用css或label处理的东西是个好主意

这是html

 
 
 
 Outcome #1   
  
 
 
  
 
    
 
 
 
   

和jquery在这里：

 function renumber() { $('#outcome-measure-fields .outcomegroup').each(function(index, value) { $(this).find('.outcome').attr('name', 'outcomes[' + index + '][outcome]'); $(this).find('.measure textarea').attr('name', 'outcomes[' + index + '][measure][]'); $(this).find('.measure1 textarea').attr('name', 'outcomes[' + index + '][measure][]'); $(this).find('.onum').text(index + 1); }); } $('.addmeasure').live('click', function() { $(this).closest('.measure').clone().insertAfter($(this).closest('.measure')).val('').find('.minus').show(); }); $('.addoutcome').live('click', function() { $('#template').clone().removeAttr('id').insertAfter($(this).closest('.outcomegroup')).find('.minus').show(); renumber(); }); $('.removeoutcome').live('click', function() { $(this).closest('.outcomegroup').remove(); renumber() }); $('.removemeasure').live('click', function() { $(this).closest('.measure').remove(); }); $('#template').clone().appendTo($('#outcome-measure-fields')).removeAttr('id'); renumber() 

当然还有你的CSS

 .outcomegroup { overflow: auto; } #template { display: none; } .col { float: left; margin: 5px; font-size: 20px; font-weight: bold; } .plus, .minus { width: 20px; margin: 2px; vertical-align: middle; position: relative; top: -3px; } .minus { display: none; } 

让我知道事情的后续

Answer 2

授予mcgrailm的解决方案是完全有效的，我可以建议使用一个名为knockoutjs的框架吗？ 它的设计正是为了你正在做的事情; 看这个例子。