Изменить часть атрибута после клонирования с помощью jQuery

Question

У меня есть таблица с разными входами. Используя кнопку, я хочу клонировать последнюю строку таблицы и добавить ее в таблицу. Кроме того, я хочу заменить «индекс» в имени на переменную индекса.

Как заменить строку "index" на переменную index?

В этом примере я просто показываю один ввод, потому что этого достаточно, чтобы получить подсказку.

<table class='taskTable'>
 <tr>
   <td>
    <input name='data[index][description]'></input>
    <input name='data[index][text]'></input>
    <input name='data[index][date]'></input>
   </td>
 </tr>
</table>

<button type='button' class='addTask'>Add Row</button>

<script>  
var index = 1;

$(".addTask").on('click', function(){
    index = index+1;
    var lastTr = $('.taskTable').find('tr:last').clone();
    //replace now the string index of the name with the variable
    $('.taskTable').append(lastTr);
});
</script>

Вот ссылка на jsFiddle https://jsfiddle.net/tg53c96m/

Answer 1

Установите имя с помощью .attr("name", value):

var newName = `data[${index}][description]`;
lastTr.find("input").attr("name", newName);

Или, если вы хотите найти / заменить:

lastTr.find("input").attr("name", 
  (i, oldName) => oldName.replace(/\[.*\]\[/, `[${index}][`));

var index = 1;

$(".addTask").on('click', function() {
  index = index + 1;
  var lastTr = $('.taskTable').find('tr:last').clone();
  lastTr.find("input").attr("name", 
      (i, oldName) => oldName.replace(/\[.*\]\[.*\]$/, `[${index}][description]`));
  console.log("New name: ", lastTr.find("input").attr("name"));
  $('.taskTable').append(lastTr);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='taskTable'>
  <tr>
    <td>
      <input name='data[index][description]'>
    </td>
  </tr>
</table>

<button class='addTask'>Add Row</button>

Answer 2

Обновление

Только что увидел отредактированный HTML, поэтому вот добавленная функция для обработки нескольких входов с разными именами:

    lastTr.find('input').each(function() {
      let nameText = $(this).attr('name');
      let newName = nameText.split('index').join(rows);
      $(this).attr('name', newName);
    });

Для того, чтобы изменить шаблон каждого имени без необходимости чтобы запомнить, какое из них должно обрабатывать только ту часть имен, которая действительно изменяется:

      let newName = nameText.split('index').join(rows);

nameText - это текущее имя ввода, которое имеет строковое значение:

      'data[index][description]',
      'data[index][text]',
      /* OR */
      'data[index][date]'

Когда .split() в массив строк, он удаляет текст: "index":

      nameText.split('index')
      // Returns ['data[', '][`description or text or date`]']

Наконец .join() преобразует массив строк в строку с номером переменной переменной между их:

      .join(index)
      // Returns `'data['+index+'][`description or text or date`]'`

---

1. Добавьте следующий оператор в качестве первой строки функции:

   let rows = $('.taskTable tr').length; 
   

   Это будет количество строк уже в таблица.

2. Добавьте это после того, как строка была клонирована, но до ее добавления:

   lastTr.find('input').attr('name', 'data' + rows);  
   

   Это находит вход, вложенный в новую строку, и назначает его name="data'+rows. Я не уверен, что с [description] частью названия. Это динамическое c или буквальное, как часть [index]. Похоже, что-то не так с этими именами ...

Примечание: Остальное имя может быть любым, я просто чувствую, что неправильно имя, похожее на это. Строка с контактом будет выглядеть следующим образом с исходным текстом:

lastTr.find('input').attr('name', 'data[' + rows + '][description]'); 

Кроме того, я добавил еще одну функцию, которая изменит ввод всех строк с новым шаблоном имен.

Демо

/* 
This will change all row input names from 
'data[index][description]' 
'data[index][text]'
'data[index][date]'
to
'data['+index+'][description]' 
'data['+index+'][text]'
'data['+index+'][date]'

index = 0,...N
*/
$('.addTask tr').each(function(index) {
  $(this).find('input').each(function() {
    let nameText = $(this).attr('name');
    let newName = nameText.split('index').join(index);
    $(this).attr('name', newName);
  });
});

$(".addTask").on('click', function(index) {
  let rows = $('.taskTable tr').length;
  const lastTr = $('.taskTable').find('tr:last').clone();
  lastTr.find('input').each(function() {
    let nameText = $(this).attr('name');
    let newName = nameText.split('index').join(rows);
    $(this).attr('name', newName);
  });
  $('.taskTable').append(lastTr);
});

<table class='taskTable'>
   <tr><td>
    <input name='data[index][description]'>
    <input name='data[index][text]'>
    <input name='data[index][date]'>
   </td></tr>
   <tr><td>
    <input name='data[index][description]'>
    <input name='data[index][text]'>
    <input name='data[index][date]'>
   </td></tr>
</table>

<button class='addTask' type='button'>Add Row</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>