jquery Пример скрипта для добавления строк формы -- множественных полей. Скрытие родительского элемента (вложенные документы)
Primary tabs
Вот такой пример:
$(function () { var mainContainerSelector = '.box-add'; var PrototypeContainerSelector = '.copy-box'; var RowSelector = '.holder-inp'; var deleteElementSelector = '.close-box'; // по чем кликаем, чтобы удалить строку (подразмевается, что жлемент удаления есть в каждой "строке" формы) var $researchLine = $(PrototypeContainerSelector); var $researchContainer = $(mainContainerSelector); var researchIndex = $(mainContainerSelector + " > " + RowSelector).length; // вложенные стоки должны быть непосредственными потомками var $researchRow = $researchLine.clone(); $researchLine.remove(); console.log('researchIndex', researchIndex); function addResearchRow() { console.log('add row!!', 'RR=', $researchRow.html()); $researchContainer.append($researchRow.html().replace(/%elem_number%/g, researchIndex)); researchIndex++; return false; } $('.plus').off("click"); // вырубаем иные обработчики $(document).on("click", '.plus', function() { // добавляем строчку c полями (таблица) addResearchRow(); return false; }); $('body').on('focus',"input.datepicker_recurring_start", function(){ // привязываем датапикер для динамически добавляемых элементов console.log('bind', researchIndex); $(this).removeClass('datepicker_recurring_start'); $(this).datetimepicker(); }); $(document).on("click", deleteElementSelector, function() { // удаляем элемент $element = $(this).parent(); // получаем родителя $element.stop().animate({ // анимация средствами JQuery height: "0px", // высоту к нулю width: "0px", // высоту к нулю opacity: 0, // прозрачность к нулю }, 600, function() { $(this).remove(); } ); researchIndex--; return false; }); } )
При этом шаблон, который используется для добавления строки может быть сколь угодно сложным -- главное, чтобы в нём было что заменить в массиве:
<div class="copy-box" style="display: none"> <div class="criteria__main bord" > <div class="row"> <div class="col left"> <div class="selects"> <label> <span class="text-center"> <span class="text-inner"> <span class="text-last"> Код теста: </span> </span> </span> </label> <div class="hold-select"> <input class="form-control input-text" name="PrimaryReport[research_results][%elem_number%][test_code]" type="text" placeholder="код теста" value="" /> </div> </div> </div> <div class="col middle"> <div class="selects"> <label> <span class="text-center"> <span class="text-inner"> <span class="text-last"> Результат: </span> </span> </span> </label> <div class="hold-select"> <input class="form-control input-text" name="PrimaryReport[research_results][%elem_number%][result]" type="text" placeholder="" value="" /> </div> </div> </div> <div class="col right"> <div class="selects"> <label for="datetimeEsFrom data-lable"> <div class="text-center"> <div class="text-inner"> <div class="text-last"> Дата и время </div> </div> </div> </label> <div class="date-event databox"> <div class="hold-data"> <input name="PrimaryReport[research_results][%elem_number%][timestamp]" class="datepicker_recurring_start criteria--datetime" type="text" placeholder="" value="" /> <!-- <input class="criteria--datetime datepicker" name="datetimeEsFrom" alt="" type="text"> --> <span></span> <a class="dateTimePicker" data-for="#datetimeEsFrom" href="#xbSWJ0iJID"> <i class="fa fa-calendar" aria-hidden="true"></i> </a> </div> </div> </div> </div> <a class="close-box" href="#"> <span> <img src="/es/images/icon-close-inner.png" alt="image" /> </span> </a> </div> </div> </div>
- Log in to post comments
- 2285 reads