powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как размножить элемент
4 сообщений из 4, страница 1 из 1
Как размножить элемент
    #36225438
Usik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
В общем представим что, есть форма и человек заполняет личные данные. И вот ему приходится заполнить данные про своего ребенка(Имя, Фамилия). Для этого есть вот такая форма с табличкой
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<form ......>
<table id='id1'>
  <tr>
    <td>Введите имя</td>
    <td><input id='inpName1' type="text"></td>
	<td>Введите Фамилию</td>
    <td><input id='inpFam1'type="text"></td>
   </tr>
 </table>
</form>

Но я же не знаю сколько у него детей , поэтому ниже этой таблички имеется картинка с плюсиком (типа описать еще одного ребенка), он нажимает на нее и ниже этой первой таблицы появляется такая же. И т.д. Вопрос в том как грамотно скопировать таблицу .. в общем нужно чтобы получилось такое.( ниже случай для двух детей).

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
<form ......>
<table id='id1'>
  <tr>
    <td>Введите имя</td>
    <td><input id='inpName1' type="text"></td>
	<td>Введите Фамилию</td>
    <td><input id='inpFam1' type="text"></td>
   </tr>
 </table>

<table id='id2'>
  <tr>
    <td>Введите имя</td>
    <td><input id='inpName2' type="text"></td>
	<td>Введите Фамилию</td>
    <td><input id='inpFam2' type="text"></td>
   </tr>
 </table>
</form>

Подскажите плз.
...
Рейтинг: 0 / 0
Как размножить элемент
    #36225658
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Эта функция создает копию указанной таблицы с заменой id (n - число для идентификаторов, от 2 и т.д.)
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
function tabcopy(tab, n) {
	
		var f = function(field, e, n1, re) {
			if((e[field] == null)||(e[field] == '')){return;}
			if(re.test(e[field])){e[field] = RegExp.$ 1  + n1;}
		};
		var t = tab.cloneNode(true);
		var r = /^(.+?)\d+$/;
		f('id', t, n, r);   // меняем id таблички
		var i,arr = t.getElementsByTagName('input');
		for(i= 0 ; i<arr.length; ++i) {
			f('id', arr[i], n, r);  // меняем id инпутов
		}
		
		return t;
	}

Если у инпутов понадобится ещё изменять name (а name нужен для отправки формы), то в цикл добавьте
Код: plaintext
1.
f('name', arr[i], n, r);

Созданную копию таблицы просто добавьте в форму, например, с помощью appendChild
...
Рейтинг: 0 / 0
Как размножить элемент
    #36226060
Usik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Спс, это то что было нужно.
...
Рейтинг: 0 / 0
Как размножить элемент
    #36226486
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Это плохая техника ... слишком избыточно, неудобно и не наглядно.
Обычно делается формочка типа твоей и список с введенными "детьми". Пользователь заполняет табличку, кликает "добавить", в списке появляется "дите", форма очищается и возможен дальнейший ввод. Можно расширять функционал. К примеру, при выборе введенного "дитя" данные о нем заполняют форму и появляется возможность редактирования. И т.д.
...
Рейтинг: 0 / 0
4 сообщений из 4, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как размножить элемент
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]