jQuery：重复一个表格行，然后根据特定的命名约定更改其中的输入名称？

我有一个棘手的情况，我需要复制表格行，然后将输入的名称更改为非常特定的格式。输入端被命名如下：jQuery：重复一个表格行，然后根据特定的命名约定更改其中的输入名称？

数据[ProjectRequirement] [0] [描述]
数据[ProjectRequirement] [0] [数量]
...

现在，当上面的行重复时，输入需要命名如下：

数据[ProjectRequirement] [1] [描述]
数据[ProjectRequirement] [1] [数量]
...

所以图案必须继续。复制该行是没有问题的，而且我用下面的方法：

$j(\'table.WfTable tr\').live(\'mousedown\', function(e){ 
    if($j(e.target).hasClass(\'add\')){ 
     var clone = $j(e.target).parents(\'tr\').clone(); 
     $j(\'table.WfTable\').find(\'tbody\').append($j(clone)); 
     // NOW I WANT TO DO THE INPUT NAME CHANGE 
    }; 
});

忽略躲过行情中，JS是通过PHP输出。所以目前，这一行是重复的，名称是相同的。是否有一种方法，一旦重复，我可以说：

“获取行中每个输入的名称，寻找像[0]或[1]等字段，并将该值更改为表格DOM元素中的行索引号（即，行1是索引0,2是索引1 ...）？“

我只能假设表的第1行位于该表的DOM树的索引0处，因此认为必须有一种方法使用该索引数据应用于输入名称？

任何帮助，非常感谢。

西蒙

编辑：这里是一个表行，动态创建（CakePHP的视图）

<tr class="repeat"> 
<td valign="top" style="width:250px;padding:10px 10px 10px 0;"><input type="hidden" name="data[ProjectRequirement][1][project_id]" value="1" id="ProjectRequirement1ProjectId"><input type="hidden" name="data[ProjectRequirement][1][id]" value="2" id="ProjectRequirement1Id"><div class="input text"><input name="data[ProjectRequirement][1][resource]" style="width:240px;" maxlength="40" type="text" value="Teachers" id="ProjectRequirement1Resource"></div></td> 
<td valign="top" style="padding:10px 0;"><div class="input text"><input name="data[ProjectRequirement][1][description]" type="text" value="Any volunteer (part time) teachers" id="ProjectRequirement1Description"></div></td> 
<td valign="top" style="width:150px;padding:10px 0;"><input name="data[ProjectRequirement][1][qty]" style="width:70px;float:left;clear:none;" maxlength="10" type="text" value="20+" id="ProjectRequirement1Qty"> <a href="#" class="add"><img src="/trusthau.net/img/buttons/btn_plus.png" style="float:right;clear:none;margin:10px 0 0 0;" class="add" alt=""></a></td> 
</tr>

来源

2012-02-17 SimonDowdles

这是什么一个表行是什么样子？ – HerrSerker 2012-02-17 11:03:41

@ yunze，请参阅下面的编辑我的问题，我已经添加了一行已输出（通过CakePHP） – SimonDowdles 2012-02-17 11:16:40

事情是这样的：

$().ready(function(){ 
    $('#table tr.repeat:last').clone().appendTo('#table'); 
    $('#table tr.repeat:last td input').each(function(){ 
     var input = $(this), 
      name = input.attr('name'); 
     name = name.replace(/(\d+)/, function(i) { 
      return ++i; 
     }); 
     input.attr('name', name); 
    }) 
});

http://jsfiddle.net/ZFNDD/4/

来源

2012-02-17 11:32:57

维克多，这看起来很有希望，我现在要给这个镜头。谢谢。 – SimonDowdles 2012-02-17 11:41:21

你绝对的生活节省，这工作的一种享受，谢谢10倍以上！ – SimonDowdles 2012-02-17 11:43:28

但我必须改变一件事。由于每行上都有一个添加按钮，如果我添加第三行并且它变为3，然后单击第1行上的添加按钮，则最后一行是第2行，这是不正确的。我改变了返回函数如下： 'return $ j（\'table.WfTable tr.repeat \'）。size（） - 1;' 这样就可以得到表中的行数-1（所以索引是正确的） – SimonDowdles 2012-02-17 11:49:10

你可以使用最后一个（jQuery的（ '选择'）。 last（））函数，它会每次给你最后一行。这会给你附加的行，然后你可以通过首先收集的数量来改变输入值现在在桌上。

我在考虑，有将是每一个重复，每一行

来源

2012-02-17 11:26:42

这不会真的工作，因为我可能不知道每行将有多少输入。问题不在重复他们，问题是找到一种方法来遍历重复行中的输入元素并相应地更改它们。 – SimonDowdles 2012-02-17 11:33:16

jQuery：重复一个表格行，然后根据特定的命名约定更改其中的输入名称？

回答

相关问题