Динамическое создание полей (JQuery, Bootstrap)

Суть задачи: Динамически создавать по два поля, например для добавления каких либо характеристик. Первое поле будет содержать название характеристики, второе ее значение.
Например: Ширина | 20
HTML код, который необходимо написать перед добавлением полей, реализует таблицу, в которую будут вставляться новые строки. В примере, для того, что бы не задумываться о стилях используется .

HTML таблицы, в которую будут вставлены динамически созданные поля:



JavaScript, который формирует строку для таблицы, содержащую поля:



Надо заметить, что данный пример создает столько переменных, сколько будет полей. Чтобы сократить количество переменных нужно в качестве id для ‘ов писать имена вида information_json_name[] и information_json_val[] соответственно. В этом случае на выходе получится 2 массива, которые можно хранить в базе данных в более компактном и удобном виде, нежели несколько разных переменных.

Заметьте, что использование Bootstrap в данном примере не обязательно, так как служит лишь для того, что бы визуализировать форму с полями.

Ниже приведены стили, которые можно использовать, если вы не подключали Bootstrap



Посмотрите пример работы или исходный, кликнув на соответствующую кнопку:

"Динамическое создание полей (JQuery, Bootstrap)"

Вам будет интересно...

Добавить комментарий