Заменить динамическое текстовое поле ID

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

function hapus(i) { 
    var $el = $("#field" + i); 
    $el.nextAll('.fieldwrapper').each(function (idx, el) { 
     $(el).find('[id]').addBack().attr('id', function() { 
      return this.id.replace(/\d+$/, idx + i) 
     }).filter('input[type="button"][onclick]').attr('onclick', 'hapus(' + (i + idx) + ')') 
    }) 
    $el.remove(); 
} 

$(document).ready(function() { 
    $("body").on("click", "#addField", function() { 

     var intId = $("#buildyourform div").length + 1; 
     var fieldWrapper = $("<div id=\"field" + intId + "\" class=\"fieldwrapper\"/>"); 
     var hidden = $("<input type=\"hidden\" id=\"hiddenField_" + intId + "\" class=\"fieldname\"/>"); 
     var fpartNo = $("<input type=\"text\" id=\"partNumber_" + intId + "\" class=\"fieldname\"/>"); 
     var fDescription = $("<input type=\"text\" id=\"description_" + intId + "\" class=\"fieldname\" readonly />"); 
     var fPrice = $("<input type=\"text\" id=\"price_" + intId + "\" readonly class=\"fieldname\" style=\"width:80px\"/>"); 

     // remove textboxes and dropdown boxes 
     var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" onclick=\"hapus("+intId+");\" />"); 
     removeButton.click(function() { 
      $(this).parent().remove(); 
     }); 
     fieldWrapper.append(hidden); 
     fieldWrapper.append(fpartNo); 
     fieldWrapper.append(fDescription); 
     fieldWrapper.append(fPrice); 
     fieldWrapper.append(removeButton); 
     $("#buildyourform").append(fieldWrapper); 
     }); 
    });

Демо здесь: JSFiddle

источник

2015-11-09 Ethen

_sometimes он удалит две строки вместе и встретит дублирующее текстовое поле ID_ .. На каких сценариях? –

Я не уверен, но вы можете попробовать jsfiddle. Вы просто продолжаете добавлять и удалять поле, и проблема будет возникать. Он отлично работает, когда это жесткий код, например, 'hapus (2)'. Это позволит удалить вторую строку таблицы, и она отлично работает. – Ethen

Вы можете использовать цепочку jQuery для простого добавления в fieldWrapper. 'Code'fieldWrapper.append (скрытый) .append (fpartNo) .append (fDescription) .append (fPrice) .append (removeButton);' code'. – Borgboy

var count = 1; 

function hapus(i) { 
    var $el = $("#field" + i); 
    $el.nextAll('.fieldwrapper').each(function (idx, el) { 
     $(el).find('[id]').addBack().attr('id', function() { 
      return this.id.replace(/\d+$/, idx + i) 
     }).find('input[type="button"][onclick]').attr('onclick', 'hapus(' + (i + idx) + ')') 
    }) 
    $el.remove(); 
} 

$(document).ready(function() { 
    $("body").on("click", "#addField", function() { 

     var intId = $("#buildyourform div").length + 1; 
     var fieldWrapper = $("<div id=\"field" + intId + "\" class=\"fieldwrapper\"/>"); 
     var hidden = $("<input type=\"hidden\" id=\"hiddenField_" + intId + "\" class=\"fieldname\"/>"); 
     var fpartNo = $("<input type=\"text\" id=\"partNumber_" + intId + "\" class=\"fieldname\"/>"); 
     var fDescription = $("<input type=\"text\" id=\"description_" + intId + "\" class=\"fieldname\" readonly />"); 
     var fPrice = $("<input type=\"text\" id=\"price_" + intId + "\" readonly class=\"fieldname\" style=\"width:80px\"/>"); 

     // remove textboxes and dropdown boxes 
     var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" onclick=\"hapus("+intId+");\" />"); 
     //removeButton.click(function() { 
      //$(this).parent().remove(); 
     //}); 
     fieldWrapper.append(hidden); 
     fieldWrapper.append(fpartNo); 
     fieldWrapper.append(fDescription); 
     fieldWrapper.append(fPrice); 
     fieldWrapper.append(removeButton); 
     $("#buildyourform").append(fieldWrapper); 

     }); 
    });

Я сделал две крошечные изменения. Сначала замените filter на find в функции hapus(). Во-вторых, удалите removeButton.Click, это вызвало вашу проблему с удалением. Fiddle: link

источник

2015-11-09 04:13:39

@Ethen: Добро пожаловать! –

Updated DEMO

Ну, .filter был не один вы должны использовать в этом сценарии. Это должно было быть .find вместо function hapus. .filter не изменил цель в своей onclick и сохранил ее, что привело к удалению следующего element тоже на своем click.

$el.nextAll('.fieldwrapper').each(function (idx, el) { 
     $(el).find('[id]').addBack().attr('id', function() { 
      return this.id.replace(/\d+$/, idx + i) 
     }).find('input[type="button"][onclick]').attr('onclick', 'hapus(' + (i + idx) + ')') 
})

источник

2015-11-09 04:13:55

Спасибо гуру. Генри сделал две крошечные изменения, и он работал идеально. – Ethen

@ Ethen Anytime .. Счастливое кодирование .. :) –

Заменить динамическое текстовое поле ID

ответ

Смежные вопросы