Как динамически добавлять одни и те же элементы при нажатии кнопки #addRow?

-4

Я хочу добавить элементы динамически. Я не понимаю, как это сделать.

Аналогичную строку следует добавить.

<div class="schedulingRecord">
<div class="form-group pi-col-md-12 pi-margin-bottom-10">
<div class="day-time pi-margin-bottom-10">
<select class="form-control" style="padding:5px; width:100px; height: auto; font-size:13px; margin-right:20px;" name="day">
<option>Sunday</option>
</select>
<select class="form-control" style="padding:5px; width:55px; height: auto; font-size:13px; margin-right:5px;" name="startTime">
<option>06</option>
</select>
<select class="form-control" style="padding:5px; width:55px; height: auto; font-size:13px; margin-right:5px;" name="startTimeCon">
<option selected>AM</option>
<option>PM</option>
</select>to
<select class="form-control" style="padding:5px; width:55px; height: auto; font-size:13px; margin-right:5px;" name="endTime">
<option>08</option>
</select>
<select class="form-control" style="padding:5px; width:55px; height: auto; font-size:13px; margin-right:20px;"name="endTimeCon">
<option>AM</option>
<option selected>PM</option>
</select>
<select class="form-control" style="padding:5px; width:70px; height: auto; font-size:13px; margin-right:5px;" name="timezone">
<option>IST</option>
</select>
<a href="javascript:void(0);" class="pi-pull-right deleteRecord"><img src="images/delete-icon.png" alt="" title="Remove"/></a>
</div>
</div>
</div>
<a href="javascript:void(0);" class="pi-pull-right addRecord" id="addRow">
<img src="images/add-icon.png" alt="" title="Add New" style="position:relative; top:-1px; right:4px;"/>
</a>

спросил(а) 2014-11-14T09:44:00+03:00 5 лет, 11 месяцев назад
0
70

Использовать .clone()

$(".addRecord").on("click", function(){
$(".form-group:first").clone(true).appendTo(".schedulingRecord");
});

скрипка


Вы также можете использовать .html(), но вот несколько отличий:

.clone можно использовать одновременно для нескольких элементов, в то время как .html() возвращает только html первого элемента.

.clone возвращает объект jQuery, а .html возвращает строку.

.clone может (если указано) сохранять любое событие и данные элемента DOM. .html не может.

.clone сохранить корневой элемент, а .html получить только innerHTML.

Подробнее см. Здесь

ответил(а) 2014-11-14T09:58:00+03:00 5 лет, 11 месяцев назад
58

Используйте этот код: Рабочий код здесь, в jsFiddle

<a href="javascript:void(0);" onclick="addRow();" class="pi-pull-right addRecord" id="addRow">
<img src="images/add-icon.png" alt="" title="Add New" style="position:relative; top:-1px; right:4px;"/> click
</a>

JSCode

function addRow(){   
$('.schedulingRecord').append($('.form-group').html());
}

    Код удаления -

function deleteRow(curDelete){
$(curDelete).closest('div').closest('div').remove(); }

    Используйте .append(), чтобы добавить Html и получить все содержимое внутри HTML, используя функции .html()

ответил(а) 2014-11-14T09:57:00+03:00 5 лет, 11 месяцев назад
58

Попробуй это:

  $('.form-group').append($('.day-time:first').html());

Это то, чего ты хочешь, я думаю! Благодаря Regent

ответил(а) 2014-11-14T09:51:00+03:00 5 лет, 11 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема