| рони | 29.12.2015 10:36 |
Цитата:
|
Сообщение от dpts
- кнопки - да надо.
|
Размножение полей формы
День добрый.
Есть разметка
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
</head>
<body>
<form id="tasks" action="taskssave.asp">
<table style="width:70%;border-collapse:collapse;">
<tr>
<th>Тип задачи</th>
<th>Норма времени</th>
<th>Объект привязки</th>
</tr>
<tr>
<td><center><input type="text" name="task_name" required="required"></center></td>
<td>
<center>
<select name="task_len">
<option value="5">5 мин.</option>
<option value="10">10 мин.</option>
<option value="15">15 мин.</option>
<option value="20">20 мин.</option>
<option value="25">25 мин.</option>
<option value="30">30 мин.</option>
<option value="35">35 мин.</option>
<option value="40">40 мин.</option>
<option value="45">45 мин.</option>
<option value="50">50 мин.</option>
<option value="55">55 мин.</option>
<option value="60">60 мин.</option>
<option value="90">90 мин.</option>
<option value="120">120 мин.</option>
<option value="180">180 мин.</option>
</select>
</center>
</td>
<td>
<center>
<select name="task_obj">
<option value="1">Звонки</option>
<option value="2">Контакты</option>
<option value="3">Контрагенты</option>
</select>
</center>
</td>
</tr>
<tr>
<td colspan="3"><br>
<center><input type="submit" name="Сохранить"></center>
</td>
</tr>
</table>
</form>
</body>
</html>
При этом оба раскрывающихся списка генерируются динамически (из БД) VBS-ом. Нужно размножать поля формы, чтобы не вводить задачи по одной. Например по принципу, как здесьhttp://ajaxs.ru/lesson/jq/121-razmno..._na_sajte.html Пробовали сами этот скрипт поправить, но не сумели. |
dpts,
какие имена будут у добавленных, кнопки удалить, добавить, теги thead и tbody где, js или jquery? |
Цитата:
- кнопки - да надо. - thead и tbody - а обязательно? - js |
Цитата:
|
А если так:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
</head>
<body>
<form id="tasks" action="taskssave.asp">
<table style="width:70%;border-collapse:collapse;">
<tr>
<th>Тип задачи</th>
<th>Норма времени</th>
<th>Объект привязки</th>
<th> </th>
</tr>
<tr>
<td><center><input type="text" name="task_name" required="required"></center></td>
<td>
<center>
<select name="task_len">
<option value="5">5 мин.</option>
<option value="10">10 мин.</option>
<option value="15">15 мин.</option>
<option value="20">20 мин.</option>
<option value="25">25 мин.</option>
<option value="30">30 мин.</option>
<option value="35">35 мин.</option>
<option value="40">40 мин.</option>
<option value="45">45 мин.</option>
<option value="50">50 мин.</option>
<option value="55">55 мин.</option>
<option value="60">60 мин.</option>
<option value="90">90 мин.</option>
<option value="120">120 мин.</option>
<option value="180">180 мин.</option>
</select>
</center>
</td>
<td>
<center>
<select name="task_obj">
<option value="1">Звонки</option>
<option value="2">Контакты</option>
<option value="3">Контрагенты</option>
</select>
</center>
</td>
<td width="40px">Х<!-- это кнопка для удалить tr и поля в нем--></td>
</tr>
<tr>
<td colspan="2" align="left"><br>
+<!-- это кнопка для добавить tr с полями в нем-->
</td>
<td colspan="2" align="right"><br>
<input type="submit" name="Сохранить">
</td>
</tr>
</table>
</form>
</body>
</html>
|
добавление строки в таблицу
dpts,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<meta http-equiv="Content-Language" content="ru">
<style type="text/css">
tbody tr:first-child td:last-child{
visibility: hidden;
}
</style>
</head>
<body>
<form id="tasks" action="taskssave.asp">
<table style="width:70%;border-collapse:collapse;">
<thead>
<tr>
<th>Тип задачи</th>
<th>Норма времени</th>
<th>Объект привязки</th>
</tr>
</thead>
<tbody>
<tr>
<td><center><input type="text" name="task_name" required="required"></center></td>
<td>
<center>
<select name="task_len">
<option value="5">5 мин.</option>
<option value="10">10 мин.</option>
<option value="15">15 мин.</option>
<option value="20">20 мин.</option>
<option value="25">25 мин.</option>
<option value="30">30 мин.</option>
<option value="35">35 мин.</option>
<option value="40">40 мин.</option>
<option value="45">45 мин.</option>
<option value="50">50 мин.</option>
<option value="55">55 мин.</option>
<option value="60">60 мин.</option>
<option value="90">90 мин.</option>
<option value="120">120 мин.</option>
<option value="180">180 мин.</option>
</select>
</center>
</td>
<td>
<center>
<select name="task_obj">
<option value="1">Звонки</option>
<option value="2">Контакты</option>
<option value="3">Контрагенты</option>
</select>
</center>
</td>
<td style="width: 60px;"><img border="0" alt="del" src="http://ajaxs.ru/demo/jq/add_input/delete.png" class="delete"></td>
</tr>
<tr>
<td colspan="4"><br>
<center><input type="button" value="Добавить поле" id="add" onclick="return add_new();">
<input type="submit" name="Сохранить"></center>
</td>
</tr>
</tbody>
</table>
</form>
<script>
window.addEventListener("DOMContentLoaded", function() {
var a = document.querySelector("#tasks"),
b = a.querySelector("tbody"),
d = b.querySelector("tr").cloneNode(!0);
a.querySelector("#add").addEventListener("click", function() {
var c = d.cloneNode(!0);
c.addEventListener("click", function() {
var a = event.target.classList;
a && a.contains("delete") && b.removeChild(c)
});
b.insertBefore(c, b.lastElementChild)
})
});
</script>
</body>
</html>
|
Работает, отлично, спасибо большое
|
когда прикручиваю к страничке перестает работать
1. Суть в том, что на странице кроме это еще вагон таблиц. В том числе и таблица с полями формы живет в DIVе, который тоже живет в таблице, и когда прикрутил
<style type="text/css">
tbody tr:first-child td:last-child{
visibility: hidden;
}
</style>
"все пропало". 2. Временно убрал стили, поменял <img border="0" alt="del" src="http://ajaxs.ru/demo/jq/add_input/delete.png" class="delete"> на <span class="delete"><ul class="icons icons--stroke--header"><li class="iconsmall" style="top:3px;left:20px;"><svg viewbox="0 0 9 9"><use xlink:href="#close" transform="translate(0, 0) scale(.35)"></svg></li></ul></span> получили вот такого вида форму поле загрузки: на форме Плюс в кружочке работает, Галка в кружочке(отправка формы ) - работает. над плюсом появилось текстовое поле с крестиком в кружочке сразу после загрузки, крестик к этому полю работает - удаляет его, а вот крестик справа от строки с тремя полями - не работает... код после правок выглядит так:
<form id="tasks" action="add.asp">
<center>
<table id="table_container" class="setup">
<thead>
<tr>
<th class="setup" style="width: 45%">Тип задачи</th>
<th class="setup">Норма времени</th>
<th class="setup">Привязать объект</th>
<th class="setup-del-row"> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="setup"><center><input size="60" class="big" type="text" name="task_name" required="required"></center></td>
<td class="setup">
<center>
<select name="task_len">
<option value="5">5 мин.</option>
<option value="10">10 мин.</option>
<option value="15">15 мин.</option>
<option value="20">20 мин.</option>
<option value="25">25 мин.</option>
<option value="30">30 мин.</option>
<option value="35">35 мин.</option>
<option value="40">40 мин.</option>
<option value="45">45 мин.</option>
<option value="50">50 мин.</option>
<option value="55">55 мин.</option>
<option value="60">60 мин.</option>
<option value="90">90 мин.</option>
<option value="120">120 мин.</option>
<option value="180">180 мин.</option>
</select>
</center>
</td>
<td class="setup">
<center>
<select name="task_obj">
<option value="1">Звонки</option>
<option value="2">Контакты</option>
<option value="3">Контрагенты</option>
</select>
</center>
</td>
<td class="setup-del-row"><span class="delete"><ul class="icons icons--stroke--header"><li class="iconsmall" style="top:3px;left:20px;"><svg viewbox="0 0 9 9"><use xlink:href="#close" transform="translate(0, 0) scale(.35)"></svg></li></ul></span></td>
</tr>
</tbody>
<tr>
<td colspan="2" align="left">
<span id="add" onclick="return add_new();">
<ul class="icons icons--stroke">
<li class="icon">
<a>
<svg viewbox="0 0 9 9">
<use xlink:href="#add" transform="translate(0, 0) scale(.35)">
</svg>
</a>
</li>
</ul>
</span>
</td>
<td align="right">
<button class="for-svg" type="submit">
<ul class="icons icons--stroke">
<li class="icon" style="top:-19px;left:-11px;">
<svg viewbox="0 0 9 9">
<use xlink:href="#save" transform="translate(0, 0) scale(.35)">
</svg>
</li>
</ul>
</button>
</td>
</tr>
</table>
</form>
<script>
window.addEventListener("DOMContentLoaded", function() {
var a = document.querySelector("#tasks"),
b = a.querySelector("tbody"),
d = b.querySelector("tr").cloneNode(!0);
a.querySelector("#add").addEventListener("click", function() {
var c = d.cloneNode(!0);
c.addEventListener("click", function() {
var a = event.target.classList;
a && a.contains("delete") && b.removeChild(c)
});
b.insertBefore(c, b.lastElementChild)
})
});
</script>
|
https://yadi.sk/i/r5EwEW8Vmb8Di вот так выглядит форма |
С артефактом в виде лишнего поля с крестиком разобрался
Как починить удаление?
|
dpts,
строка 94, 99, 106
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#table_container tbody tr:first-child td:last-child{
visibility: hidden;
}
</style>
</head>
<body>
<form id="tasks" action="add.asp">
<center>
<table id="table_container" class="setup">
<thead>
<tr>
<th class="setup" style="width: 45%">Тип задачи</th>
<th class="setup">Норма времени</th>
<th class="setup">Привязать объект</th>
<th class="setup-del-row"> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="setup"><center><input size="60" class="big" type="text" name="task_name" required="required"></center></td>
<td class="setup">
<center>
<select name="task_len">
<option value="5">5 мин.</option>
<option value="10">10 мин.</option>
<option value="15">15 мин.</option>
<option value="20">20 мин.</option>
<option value="25">25 мин.</option>
<option value="30">30 мин.</option>
<option value="35">35 мин.</option>
<option value="40">40 мин.</option>
<option value="45">45 мин.</option>
<option value="50">50 мин.</option>
<option value="55">55 мин.</option>
<option value="60">60 мин.</option>
<option value="90">90 мин.</option>
<option value="120">120 мин.</option>
<option value="180">180 мин.</option>
</select>
</center>
</td>
<td class="setup">
<center>
<select name="task_obj">
<option value="1">Звонки</option>
<option value="2">Контакты</option>
<option value="3">Контрагенты</option>
</select>
</center>
</td>
<td class="setup-del-row"><span class="delete"><ul class="icons icons--stroke--header"><li class="iconsmall" style="top:3px;left:20px;"><svg viewbox="0 0 9 9"><use xlink:href="#close" transform="translate(0, 0) scale(.35)"></svg></li></ul></span></td>
</tr>
<tr>
<td colspan="2" align="left">
<span id="add" onclick="return add_new();">
<ul class="icons icons--stroke">
<li class="icon">
<a>
<svg viewbox="0 0 9 9">
<use xlink:href="#add" transform="translate(0, 0) scale(.35)">
</svg>
</a>
</li>
</ul>
</span>
</td>
<td align="right">
<button class="for-svg" type="submit">
<ul class="icons icons--stroke">
<li class="icon" style="top:-19px;left:-11px;">
<svg viewbox="0 0 9 9">
<use xlink:href="#save" transform="translate(0, 0) scale(.35)">
</svg>
</li>
</ul>
</button>
</td>
</tr>
</tbody>
</table>
</form>
<script>
window.addEventListener("DOMContentLoaded", function() {
var a = document.querySelector("#table_container"),
b = a.querySelector("tbody"),
d = b.querySelector("tr").cloneNode(!0);
a.querySelector("#add").addEventListener("click", function() {
var c = d.cloneNode(!0);
c.addEventListener("click", function() {
var a = event.target.classList;
a && a.contains("iconsmall") && b.removeChild(c)
});
b.insertBefore(c, b.lastElementChild)
})
});
</script>
</body>
</html>
|
поправил, - не удаляет :( не реагирует клик по iconsmall
|
dpts,
здесь работает? или сделайте макет в песочнице с вашим css, zip не предлагать. http://plnkr.co/edit/?p=preview |
|
|
|
Чего-то я совсем туплю.
Сделал копипаст с http://embed.plnkr.co/kT8E35IkpvYHw7NJ6MEL/ Пока "кнопка удаления" в виде <span class="iconsmall">X</span>- все работает, удаляет. Как только убираем символ Х и в этот span заворачиваем svg - так сразу перестает удалять |
Нашел где собака зарыта. Из-за того, что svg идет со смещением позиции, клик по иконке - не попадает в область на которую распространяется отслеживание события.
|
Огромное Вам спасибо
|
Задача немного изменилась/усложнилась.
Как говорил раньше, информация берется из БД.
Решение приведенное выше всем устраивает, если в БД нет записей о типах задач. Если в БД есть информация о типах задач, то таблица выглядит примерно так: http://plnkr.co/edit/DEFTx5drBeWakFH85JH2?p=preview Если "говорим" добавить строку с полями, - скрипт добавляет копию 1 строки таблицы со всем ее содержимым (включая значения value у инпутов hidden и text, и selected-ы от options-ов). как сделать так чтоб вместо этого добавлялась строка с полями у которых: 1. У инпута hidden - value="0" 2. У инпута text - value нету 3. У options-ов от обоих select-ов - selected нету то есть вот такую строчку:
<tr>
<td class="setup"><center><<input type="hidden" name="taskid" value="0"><input size="60" class="big" type="text" name="task_name" required="required"></center></td>
<td class="setup">
<center>
<select name="task_len">
<option value="5">5 мин.</option>
<option value="10">10 мин.</option>
<option value="15">15 мин.</option>
<option value="20">20 мин.</option>
<option value="25">25 мин.</option>
<option value="30">30 мин.</option>
<option value="35">35 мин.</option>
<option value="40">40 мин.</option>
<option value="45">45 мин.</option>
<option value="50">50 мин.</option>
<option value="55">55 мин.</option>
<option value="60">60 мин.</option>
<option value="90">90 мин.</option>
<option value="120">120 мин.</option>
<option value="180">180 мин.</option>
</select>
</center>
</td>
<td class="setup">
<center>
<select name="task_obj">
<option value="1">Звонки</option>
<option value="2">Контакты</option>
<option value="3">Контрагенты</option>
</select>
</center>
</td>
<td class="setup-del-row"><span class="delete"><ul class="icons icons--stroke--header"><li class="iconsmall" style="top:4px;left:20px;"><span class="iconsmall">X</span><svg viewbox="0 0 9 9"><use xlink:href="#close" transform="translate(0, 0) scale(.35)"></svg></li></ul></span></td>
</tr>
Пусть у каждой добавляемой строчки value от hidden-а равняется 0 так потом проще будет разбирать, на что добавилось, а что (возможно) поменялось или удалилось |
dpts,
перед вставкой найдите нужные элементы в строке клона и установите желаемые значения.
window.addEventListener("DOMContentLoaded", function() {
var a = document.querySelector("#table_container"),
b = a.querySelector("tbody"),
d = b.querySelector("tr").cloneNode(!0);
a.querySelector("#add").addEventListener("click", function() {
var c = d.cloneNode(!0);
*!*
c.querySelector("[type='hidden']").value = 0;
c.querySelector("[type='text']").value = '';
[].forEach.call( c.querySelectorAll('select'), function(el) {
el.selectedIndex = 0;
});
*/!*
c.addEventListener("click", function(event) {
var a = event.target.classList;
a && a.contains("iconsmall") && b.removeChild(c)
});
b.insertBefore(c, b.lastElementChild)
})
});
|
Благодарю, вроде все хорошо, добавляет как надо, вот только не удаляет строчки, которые были созданы не этим скриптом.
Можно как-то починить? |
dpts,
можно но уже не интересно |
Ясно, и на том спасибо
|
| Часовой пояс GMT +3, время: 13:47. |