jQuery: дублировать строку таблицы, а затем изменить имя входов в нее в соответствии с определенным соглашением об именах? - PullRequest
1 голос
/ 17 февраля 2012

У меня сложная ситуация, когда мне нужно продублировать строку таблицы, а затем изменить имена входных данных в очень специфический формат.Входные данные имеют следующие имена:

  • data [ProjectRequirement] [0] [description]
  • data [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 таблицы имеетиндекс 0 в дереве DOM этой таблицы, и поэтому вы считаете, что должен быть способ использовать эти индексные данные для применения к именам ввода?

Любая помощь очень ценится.

Симон


РЕДАКТИРОВАТЬ: Вот одна строка таблицы, созданная динамически (представление 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>

Ответы [ 2 ]

4 голосов
/ 17 февраля 2012

Примерно так:

$().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/

0 голосов
/ 17 февраля 2012

Можете ли вы использовать функцию last (jQuery ('selector'). Last ()) в коде jQuery, которая будет каждый раз давать вам последнюю строку. Это даст вам добавленную строку, а затем вы можете изменить входные значения с помощьюсначала собираем количество строк, представленных в таблице.

Я думаю, что будет повторение каждой строки

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...