Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 30.12.2015, 09:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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">&nbsp;</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>
Ответить с цитированием
  #12 (permalink)  
Старый 30.12.2015, 10:00
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

поправил, - не удаляет не реагирует клик по iconsmall
Ответить с цитированием
  #13 (permalink)  
Старый 30.12.2015, 10:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dpts,
здесь работает? или сделайте макет в песочнице с вашим css, zip не предлагать.
http://plnkr.co/edit/?p=preview
Ответить с цитированием
  #14 (permalink)  
Старый 30.12.2015, 10:15
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

В
http://plnkr.co/edit/?p=preview

удаление тоже не работает
Ответить с цитированием
  #15 (permalink)  
Старый 30.12.2015, 10:16
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

http://plnkr.co/edit/hmMTC6twmq2sOv9edeAG?p=preview
Ответить с цитированием
  #16 (permalink)  
Старый 30.12.2015, 10:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dpts,
сделайте нормальный html и не теряйте event
http://embed.plnkr.co/kT8E35IkpvYHw7NJ6MEL/
Ответить с цитированием
  #17 (permalink)  
Старый 30.12.2015, 11:36
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

Чего-то я совсем туплю.
Сделал копипаст с http://embed.plnkr.co/kT8E35IkpvYHw7NJ6MEL/
Пока "кнопка удаления" в виде
<span class="iconsmall">X</span>
- все работает, удаляет.

Как только убираем символ Х и в этот span заворачиваем svg - так сразу перестает удалять
Ответить с цитированием
  #18 (permalink)  
Старый 30.12.2015, 11:50
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

Нашел где собака зарыта. Из-за того, что svg идет со смещением позиции, клик по иконке - не попадает в область на которую распространяется отслеживание события.
Ответить с цитированием
  #19 (permalink)  
Старый 30.12.2015, 11:56
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

Огромное Вам спасибо
Ответить с цитированием
  #20 (permalink)  
Старый 07.01.2016, 11:00
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

Задача немного изменилась/усложнилась.
Как говорил раньше, информация берется из БД.
Решение приведенное выше всем устраивает, если в БД нет записей о типах задач.
Если в БД есть информация о типах задач, то таблица выглядит примерно так:
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 так потом проще будет разбирать, на что добавилось, а что (возможно) поменялось или удалилось
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать проверку всех полей формы при нажатии кнопки sss2019 Общие вопросы Javascript 2 04.01.2014 02:00
проверка формы на изменение полей, кроме одного! cmygeHm ExtJS 14 13.04.2011 18:27
Проверка полей отправляемой формы. denisOgr jQuery 6 18.10.2010 19:40
Собрать значения всех полей формы vvsh Events/DOM/Window 3 09.11.2009 00:35
проверка полей формы!!!! DENAT Общие вопросы Javascript 0 05.06.2008 22:14