PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

Добавка полей формы в таблице

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)

Страниц (2): [1] 2 »

Описание: Добавка полей формы в таблице

Поиск в теме | Версия для печати

Tyoma5891	Отправлено: 13 Апреля, 2014 - 17:33:30
Частый посетитель Покинул форум Сообщений всего: 621 Дата рег-ции: Авг. 2013 Помог: 5 раз(а)	Добрый день всем! Возник такой вопрос есть таблица в ней форма и яваскрипт который добавляет при нажатии кнопки строки в таблице с полями формы.... CODE (html): скопировать код в буфер обмена <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> var cnt = 2; $(document).ready(function(){ // Add new row $('.add-button').click(function(event){ event.preventDefault(); var line = $('#parameters_1').html(); var expr = /del_[0-9]+/; var newline = line.replace(expr, 'del_'+cnt); $('.parameters-table').append('<tr class="parameters" id="parameters_'+cnt+'">'+newline+'</tr>'); cnt++; }); }); // Delete row function deleteRow(btn_id){ var del_id = btn_id.split('_'); $('#parameters_'+del_id[1]).remove(); } </script> </head> <form action="" method="post"> <table class="parameters-table"> <tr> <th>Type</th> <th>Depth</th> <th>Width</th> <th>Height</th> <th>Quantity</th> <th></th> </tr> <tr class="parameters" id="parameters_1"> <td> <select name="type[]"> <option value="type_1">Type 1</option> <option value="type_2">Type 2</option> <option value="type_3">Type 3</option> <option value="type_4">Type 4</option> </select> </td> <td> <select name="depth[]"> <option value="1">1 mm</option> <option value="2">2 mm</option> <option value="3">3 mm</option> <option value="4">4 mm</option> </select> </td> <td> <input type="text" name="width[]" value=""/> </td> <td> <input type="text" name="height[]" value=""/> </td> <td> <input type="text" name="quant[]" value=""/> </td> <td> <button type="button" class="del-button" id="del_1" onclick="deleteRow(this.id); return false;">Delete</button> </td> </tr> </table> <p> <button class="add-button">Add row</button> </p> <p> <input type="submit" value="Send form"/> </p> </form> каким образом можно отфильтровать селекты при последующем нажатии кнопки доьавить, тоесть чтобы добавлялись и отображались только обычные ячейки с инпутами... (Отредактировано автором: 13 Апреля, 2014 - 17:38:19)

Tyoma5891	Отправлено: 14 Апреля, 2014 - 09:44:35
Частый посетитель Покинул форум Сообщений всего: 621 Дата рег-ции: Авг. 2013 Помог: 5 раз(а)	Что никто не сталкивался с подобным?

3d_killer	Отправлено: 14 Апреля, 2014 - 09:53:04
Участник Покинул форум Сообщений всего: 1916 Дата рег-ции: Апр. 2011 Откуда: Ростов-на-Дону Помог: 21 раз(а)	Tyoma5891 пишет: каким образом можно отфильтровать селекты при последующем нажатии кнопки доьавить, тоесть чтобы добавлялись и отображались только обычные ячейки с инпутами ну по вопросу я ниче не понял что нужно сделать: отфильтровать селекты (список) что бы отображались простые ячейки с инпутами, не представляю что это значит, я так думаю и никто кто просматривал не понял в чем состоит задача, вот и не отвечает никто

Tyoma5891	Отправлено: 14 Апреля, 2014 - 10:11:40
Частый посетитель Покинул форум Сообщений всего: 621 Дата рег-ции: Авг. 2013 Помог: 5 раз(а)	3d_killer пишет: Tyoma5891 пишет: каким образом можно отфильтровать селекты при последующем нажатии кнопки доьавить, тоесть чтобы добавлялись и отображались только обычные ячейки с инпутами ну по вопросу я ниче не понял что нужно сделать: отфильтровать селекты (список) что бы отображались простые ячейки с инпутами, не представляю что это значит, я так думаю и никто кто просматривал не понял в чем состоит задача, вот и не отвечает никто В приложении картинка так выглядит форма. Сейчас при нажатии кнопки добавить добавляется вся строка тип, толщина и т..да мне нужно чтобы при нажатии кнопки добавить сейчас добавлялось только поля ширина высота и количтсево ну и кнопка удалить для каждого ряда, посмотрите код страницы высше что я привел... Прикреплено изображение (Нажмите для увеличения)

3d_killer	Отправлено: 14 Апреля, 2014 - 10:21:14
Участник Покинул форум Сообщений всего: 1916 Дата рег-ции: Апр. 2011 Откуда: Ростов-на-Дону Помог: 21 раз(а)	думаю проще будет добавить так а потом две секции опустошить

Tyoma5891	Отправлено: 14 Апреля, 2014 - 10:26:34
Частый посетитель Покинул форум Сообщений всего: 621 Дата рег-ции: Авг. 2013 Помог: 5 раз(а)	3d_killer пишет: думаю проще будет добавить так а потом две секции опустошить а как это сделать не могли бы продемонстрировать в коде?

3d_killer	Отправлено: 14 Апреля, 2014 - 10:38:40
Участник Покинул форум Сообщений всего: 1916 Дата рег-ции: Апр. 2011 Откуда: Ростов-на-Дону Помог: 21 раз(а)	ну во первых тут класс например добавить CODE (html): скопировать код в буфер обмена <td class='first'> <select name="type[]"> <option value="type_1">Type 1</option> <option value="type_2">Type 2</option> <option value="type_3">Type 3</option> <option value="type_4">Type 4</option> </select> </td> <td class='second'> <select name="depth[]"> <option value="1">1 mm</option> <option value="2">2 mm</option> <option value="3">3 mm</option> <option value="4">4 mm</option> </select> </td> а в скрипте после этой строки: CODE (javascript): скопировать код в буфер обмена $('.parameters-table').append('<tr class="parameters" id="parameters_'+cnt+'">'+newline+'</tr>'); CODE (javascript): скопировать код в буфер обмена $("#parameters_'+cnt+'").children('first').html(''); $("#parameters_'+cnt+'").children('second').html(''); вроде так, не проверял (Отредактировано автором: 14 Апреля, 2014 - 10:41:10)

Tyoma5891	Отправлено: 14 Апреля, 2014 - 10:57:54
Частый посетитель Покинул форум Сообщений всего: 621 Дата рег-ции: Авг. 2013 Помог: 5 раз(а)	не работает...

LIME	Отправлено: 14 Апреля, 2014 - 11:01:40
Активный участник Покинул форум Сообщений всего: 10732 Дата рег-ции: Нояб. 2010 Помог: 322 раз(а)	потому что в кавычках селекторов бардак

Tyoma5891	Отправлено: 14 Апреля, 2014 - 11:06:31
Частый посетитель Покинул форум Сообщений всего: 621 Дата рег-ции: Авг. 2013 Помог: 5 раз(а)	LIME пишет: потому что в кавычках селекторов бардак хм..не могли бы более конкретнее...?

3d_killer	Отправлено: 14 Апреля, 2014 - 11:16:28
Участник Покинул форум Сообщений всего: 1916 Дата рег-ции: Апр. 2011 Откуда: Ростов-на-Дону Помог: 21 раз(а)	CODE (javascript): скопировать код в буфер обмена $("#parameters_"+cnt).children('.first').html(''); $("#parameters_"+cnt).children('.second').html('');

LIME	Отправлено: 14 Апреля, 2014 - 11:16:36
Активный участник Покинул форум Сообщений всего: 10732 Дата рег-ции: Нояб. 2010 Помог: 322 раз(а)	да ну бред вообще а стелефона код не напишу

3d_killer	Отправлено: 14 Апреля, 2014 - 11:17:11
Участник Покинул форум Сообщений всего: 1916 Дата рег-ции: Апр. 2011 Откуда: Ростов-на-Дону Помог: 21 раз(а)	не обратил внимание разные кавычки поставил (Добавление) и это замени CODE (javascript): скопировать код в буфер обмена $('.add-button').click(function(event){ на это CODE (javascript): скопировать код в буфер обмена $(document).on('click','.add-button',function(event){

LIME	Отправлено: 14 Апреля, 2014 - 11:19:58
Активный участник Покинул форум Сообщений всего: 10732 Дата рег-ции: Нояб. 2010 Помог: 322 раз(а)	3d_killer если уж удалять то давать одинаковый класс для select и remove() (Добавление) а on для чего? (Добавление) $("#parameters_"+cnt+" .removeClass").remove();

3d_killer	Отправлено: 14 Апреля, 2014 - 11:36:25
Участник Покинул форум Сообщений всего: 1916 Дата рег-ции: Апр. 2011 Откуда: Ростов-на-Дону Помог: 21 раз(а)	На вновь созданные объекты или не отрабатывает функция иил отрабатывает но не во всех браузерах, что то такое. раньше существовала функция live или life потом разработчики заменили ее на on (по оф документации jquery она более оптимизирована что ли) (Добавление) LIME пишет: ("#parameters_"+cnt+" .removeClass").remove(); а при таком раскладе удалит td элементы и табличка будет выглядеть не эстетично по сравнению с другими

Поиск в теме | Версия для печати

Страниц (2): [1] 2 »

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« JavaScript & VBScript »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.