Как изменить значения полей клонированного содержания?

Question

[maiskiykot]

Понадобилось быстро клонировать строку таблицы, содержащую поля формы. Естественно, у этих полей есть name и value. Как сделать изменение name на что-то типа name+1 и value на value+1. А ещё произвести полный пересчет элементов, чтобы не нарушалась нумерация элементов. Это потому, что каждый новый элемент тоже может быть клонирован, чтобы вставить строку в нужное место.

Пока взял за основу следующий код:

function add(){
 $("table").append($("table")
 .find("#gonnaclone").clone().removeAttr("id")
 .find(".input").val($(".input").val() + 1).end());
}

var count_id = 0
function cloneRow() {
       count_id++;
       var row = document.getElementById("gonnaclone"); 
       var table = document.getElementById("table_texts");  

       var clone = row.cloneNode(true); // copy children too
       clone.id = "gonna_"+count_id; // change id or other attributes/contents
       table.appendChild(clone); // add new row to end of table
}

Answer 1

[Absolute138]

в name и value - число:

function cloneAndAdd(){
  var t = $('#table_texts');
  var cloneLastRow = t.find('tr:last').clone();
  cloneLastRow.find('[name],[value]').each(function(){
    var n = ~~this.name || 0;
    var v = ~~this.value || 0;
    this.name = ++n;
    this.value = ++v;
  });
  cloneLastRow.attr('id', 'gonna_'+(t.find('tr').length+1) );
  t.append(cloneLastRow);
}

в name и value - строка:

function cloneAndAdd(){
  var t = $('#table_texts');
  var cloneLastRow = t.find('tr:last').clone();
  cloneLastRow.find('[name],[value]').each(function(){
     this.value += '1';
     this.name += '1';
  });
  cloneLastRow.attr('id', 'gonna_'+(t.find('tr').length+1) );
  t.append(cloneLastRow);
}

Comments

[maiskiykot]

А если name уже имеет окончание name1? Сработает?

[Absolute138]

maiskiykot, не сработает.
Как-то так:

function cloneAndAdd(){
  var t = $('#table_texts');
  var cloneLastRow = t.find('tr:last').clone();
  cloneLastRow.find('[name],[value]').each(function(){
    var prefN = this.name.replace(/[^a-zA-Z]+/g, '');
    var prefV = this.value.replace(/[^a-zA-Z]+/g, '');
    var n = this.name.replace(/\D/g,'');
    var v = this.value.replace(/\D/g,'');
    n = ~~n || 0;
    v = ~~v || 0;
    this.name = prefN + (++n);
    this.value = prefV + (++v);
  });
  cloneLastRow.attr('id', 'gonna_'+(t.find('tr').length+1) );
  t.append(cloneLastRow);

}

[maiskiykot]

Absolute138, А как потом пересобрать весь этот дом? Например, у меня будет возможность клонировать 2-ю и последующие строки. Может возникнуть фигня с последовательностью и уникальностью индексов. Причем в задаче и то и то важно - нужно сохранять последовательность и следить за уникальностью. На PHP за пару минут бы собрал, но нужно без перезагрузки страницы.

[Absolute138]

maiskiykot, здесь клонируется последняя строка (tr). Что здесь считать индексом и какие критерии уникальности?

[maiskiykot]

Не совсем так. Тут необходимо вставлять клон после того элемента, в котором вызвали клонирование. Соответственно порядок должен соблюдаться. К примеру чел может три раза нажать первый элемент и получить клоны 2,3,4. Но вставляться каждый раз должно после первого элемента не после последнего. А остальные элементы должны сдвигаться вниз с изменением индексов в сторону увеличения.

[Absolute138]

maiskiykot, как-то вы изначально не точно сформулировали что требуется... я набросал примерно... Но "индексы" формируются не путём копирования, а путем пересчета по всей таблице:

var cloneTable = {
  indexUp : function(val){
    var pref = val.replace(/[^a-zA-Z_]+/g, ''),
        n = val.replace(/\D/g,'');
    n = ~~n || 0;
    n++;
    return pref + n;
    
  },
  reIndex : function(t){
    var _self = this;
    t.find('tr').each(function(i){
      this.id = 'id_'+i;
      var t = $(this);
      t.find('[name],[value]').each(function(k){
        this.name = 'name_'+i+'_'+k;
        this.value = 'value_'+i+'_'+k;
      });
    });
  },
  init: function(t){
    var _self = this;
    t.find('tr').each(function(){
      var cloneBtn = $('<button />',{
        text : 'Клонировать',
        click : function(){
          var clone = $(this).parents('tr').clone(true, true);
          $(this).parents('tr').after(clone);
          _self.reIndex(t);
        }
      });
      var td = $('<td />');
      td.append(cloneBtn);
      $(this).append(td);
    });
    _self.reIndex(t);
  }
  
}
cloneTable.init($('table'));

Как работает: https://jsbin.com/hewajulumo/edit?html,js,console,...

[maiskiykot]

Буду изучать. В любом случае спасибо!