#jquery #html #duplicates #clone
#jquery #HTML #дубликаты #клонировать
Вопрос:
Я пытаюсь настроить форму, в которой на основе значения поля выбора 1,2,3,4 будет отображаться на странице следующий код только столько раз, сколько соответствует значению поля выбора.
<div id='guestDetails'>
<tr>
<td>Guest ".$cnt."'s Name</td>
<td>Guest ".$cnt."'s Address</td>
<td>Guest ".$cnt."'s Phone</td>
<td>Guest ".$cnt."'s Email</td>
</tr>
</tr>
<tr>
<td><input type='text' name='guest".$cnt."Name' /></td>
<td><input type='text' name='guest".$cnt."Address' /></td>
<td><input type='text' name='guest".$cnt."Phone' /></td>
<td><input type='text' name='guest".$cnt."Email' /></td>
</tr>
</div>
Итак, если значение параметра select равно 2, то эти поля ввода будут отображаться 2 раза. Если значение изменить на 3, то они будут там 3 раза. Не совсем уверен, как это сделать.
Комментарии:
1.Я никогда раньше не видел, чтобы
<tr>
и<td>
теги использовались за пределами<table>
. Очень странно. Редактировать: Кроме того, после первой строки есть два</tr>
тега.
Ответ №1:
Основной подход заключается в:
1) Создайте скрытый «шаблон», который мы будем копировать, и контейнер div, куда мы будем помещать копии:
<div id='guest_detail_template' style='visibility:hidden;position:absolute'>
<table>
<tr>
<td>Guest 's Name</td>
<td>Guest 's Address</td>
<td>Guest 's Phone</td>
<td>Guest 's Email</td>
</tr>
<tr>
<td><input type='text' name='guestName' /></td>
<td><input type='text' name='guestAddress' /></td>
<td><input type='text' name='guestPhone' /></td>
<td><input type='text' name='guestEmail' /></td>
</tr>
</table>
</div>
<div id='guest_details'></div>
2) Настройте функцию, которая добавляет копию шаблона в контейнер. Вы используете .clone()
метод jQuery selections для создания копии, исправляете стиль, чтобы копия не была скрыта, и используете append
в контейнере (после его выбора), чтобы поместить новый элемент в конец.
function add() {
var item = $('#guest_detail_template').clone();
item.attr({'style': ''});
$('#guest_details').append(item);
}
3) Вызывайте функцию столько раз, сколько необходимо, или в любом контексте.
4) Чтобы сделать результирующую форму полезной, вам нужно знать, какое имя сочетается с каким адресом и т.д. Для этого вам понадобятся разные имена для <input>
файлов в каждой <div>
копии. Вы можете сделать это, используя .find
для выбора <input>
элементов в новом элементе, а затем вызвав .attr()
еще раз, на этот раз с помощью какой-либо вложенной функции, чтобы внести соответствующие изменения в имя, указанное в шаблоне. (Подсказка: передайте значение, которое вы в данный момент вызываете $cnt
в качестве параметра add()
, и соедините его там, где это уместно.)
Комментарии:
1. Есть ли причина, по которой
<table></table>
теги были опущены? Конечно, это не может быть преднамеренным.2. Они были опущены, потому что OP пропустил их, и я не заметил при переформатировании материала. 🙂 Должно быть исправлено сейчас.
3. это имеет смысл.. Можете ли вы показать мне, как будет выглядеть attr для добавления идентификатора элемента?
4. … Вы на самом деле знаете jQuery и / или javascript? Вы пробовали читать документацию по методу .attr()?
5. Суть в том, что остальную часть этого лучше усвоить, прочитав документацию или даже методом проб и ошибок. Я не могу осмысленно «показать, как это будет выглядеть», фактически не выполняя работу за вас. По крайней мере, метод проб и ошибок может привести вас к новому, но более утонченному вопросу, который вы можете задать.
Ответ №2:
Добавьте прослушиватель событий в поле выбора,
$("#number_of_inputs").change(function() { /* value has changed */ });
Вы можете получить выбранный номер в обратном вызове .change с помощью
Number($(this).val());
Затем напишите функцию, которая принимает индекс и генерирует указанную вами разметку, после чего очистите содержащий div и добавьте к нему вызов функции в цикле. Например:
$("#number_of_inputs").change(function() {
$("#container").html("");
for (var i = 0; i < Number($(this).val()); i) {
$("#container").append(generateForm(i));
}
});
Ответ №3:
Во-первых, ваша разметка может быть неправильной. Вы не должны помещать такой DIV между TRS.
Вот подход к копированию ваших входных элементов:
Добавьте идентификатор, скажем guestInputs
, к TR, который содержит ваши входные элементы.
Добавьте прослушиватель в select — $("#selectID").change(methodName)
В этом методе получите число, выбранное пользователем с помощью $("#select").val()*1
, и используйте его для выполнения цикла и создания новых полей ввода, как показано ниже.
var newRow = $("#guestInputs").clone(); // clone the item
newRow.attr("id", "guestInputsNew"); // change the ID to avoid conflict
$("#guestInputs").parent().append(newRow); // append it to the table
Обратите внимание, что вы можете захотеть изменить несколько идентификаторов в новой строке, прежде чем присоединять ее к таблице.
Ответ №4:
Простое добавление HTML в вашем случае не сработает. Переменные PHP должны быть жестко закодированы, иначе они будут отображаться в виде текста. Вам нужно будет либо выполнить некоторый AJAX, либо написать весь HTML для шаблона на стороне сервера, затем немного поработать с JavaScript.
Ответ №5:
Вы можете сделать вот так. Это не совсем то, что вы делаете, но я надеюсь, вы сможете понять, как это сделать.
HTML:
<select id="number">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="display_section">
<input type="text" name="txt[]" value="" />
<div>
Javascript:
$(document).ready(function() {
var append_str = '<input type="text" name="txt[]" value="" /><br />';
$('#number').change(function() {
var total = parseInt($(this).val());
$('#display_section').html(function() {
var temp_str = '';
for (i = 0; i < total; i ) {
temp_str = temp_str append_str;
}
return temp_str;
});
});
});
ДЕМОНСТРАЦИЯ:
http://jsfiddle.net/ynhat/tA4wH/5 /
Комментарии:
1. как тогда изменить идентификатор / имя входных данных, чтобы не было конфликта? имя=»имя1 гостя», имя = «имя2 гостя»
2.@Nalley сначала попытайтесь понять, как работает код Javascript, и ответ должен стать очевидным. Подсказка: внутренняя ‘функция’ вызывается для создания строки с несколькими
<input>
тегами, связанными вместе, и jQuery затем использует это как innerHTMLdisplay_section
<div>
. Итак, вам нужно было бы изменить этот код, чтобы в каждый добавленный<input>
тег был вставлен номер в нужном месте.3. @Nalley: Если вы используете
input
имя, как яtxt[]
, вы получите массивtxt
на PHP при отправке формы. Таким образом, вам не нужно называть входные данные какguest1name
,guest2name',
guest3name`,…