Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 14.10.2020, 20:06
l30 l30 вне форума
Интересующийся
Отправить личное сообщение для l30 Посмотреть профиль Найти все сообщения от l30
 
Регистрация: 26.09.2020
Сообщений: 11

Сообщение от laimas Посмотреть сообщение
А зачем переписывать, да еще весь, просто не нужно делать лишнего.

Если имена типа name[], то это гарантия РНР на сервере. А он получая такие имена, понимает, что это массив элементов под ключом name, куда их и поместит. При этом он будет получать элементы по порядку их следования, а значит получится массив:

Array [
    str [
        [0] => value,
        [1] => value,
        .... 
    ],
    name [
        [0] => value,
        [1] => value,
        .... 
    ],
    ....
]


Какой смысл их нумеровать на клиенте принудительно от 1 до n, если сервер и без этого все разложит как надо? Охота иметь именно с индекса 1? Это мазохизм, а если нужна нумерация, то ее сформировать, это же плевое дело.

Принудительная индексация на клиенте нужна в том случае, если мы хотим иметь на сервере массив такой структуры:

Array [
    [index] => [[str] => value, [name] => value, ...],
    [index] => [[str] => value, [name] => value, ...],
    ....
]


где в качестве index и указываем уникальные значения. Но какой смысл помнить цифру, увеличивать и использовать. Достаточно брать готовое - текущую метку времени. А то что на сервере будут индексы вложения не

[0] => [[str] => value, [name] => value, ...], [1] => [[str] => value, [name] => value, ...], ...,

а

[1601149425635] => [[str] => value, [name] => value, ...], [1601149425457] => [[str] => value, [name] => value, ...] ...

серверу глубоко наплевать, он будет работать с именованными ключами str, name, ..., они его интересуют.
Да так и есть, далее все обрабатывает php и формирует документ. Нумерация на клиенте нужна для наглядности пользователю и никакого другого функционала она не несет, но это условие обязательное.
Ответить с цитированием
  #12 (permalink)  
Старый 14.10.2020, 20:07
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 639

Сообщение от l30
Но если удалить ...
В вашем (не вашем) коде нужно еще разбираться.
Что реально удаляет строку?
parentId.addEventListener('click', function(evt){
  if(evt.target.closest('.deleteRow')) {
    evt.target.closest('tr').remove();
    countOfFields--;
    curFieldNameId = curFieldNameId-1;
  }
})

Или
function deleteField(a) {
  if (countOfFields > 1)
  {
 // Получаем доступ к ДИВу, содержащему поле
 var contDiv = a.parentNode;
 // Удаляем этот ДИВ из DOM-дерева
 contDiv.parentNode.removeChild(contDiv);
 // Уменьшаем значение текущего числа полей
   
 }
 // Возвращаем false, чтобы не было перехода по сслыке
 return false;
}

Если первое, то туда тоже надо вставить repos() перед выходом (А зачем тогда второе?)
Сообщение от laimas
Сообщение от voraa
Я не собираюсь переписывать автору весь код.
А зачем переписывать, да еще весь, просто не нужно делать лишнего.
К автору.
Удалять лишнее я тоже не собираюсь
Ответить с цитированием
  #13 (permalink)  
Старый 14.10.2020, 20:13
l30 l30 вне форума
Интересующийся
Отправить личное сообщение для l30 Посмотреть профиль Найти все сообщения от l30
 
Регистрация: 26.09.2020
Сообщений: 11

Удаляет первое. Извиняюсь, случайно добавил вторую функцию, она не нужна.
repos() добавил, но все равно нумерация не меняется
Ответить с цитированием
  #14 (permalink)  
Старый 14.10.2020, 20:22
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 639

Тут меняется.
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
  <title>TEST</title>
 </head>

<body id="body"  >
<table id="parentId">
            <thead>
              <tr>
                <th>№</th>
                <th>Номенклатура</th>
                <th>Кол-во</th>
                <th>Цена</th>
                <th>Сумма</th>
              </tr>
            </thead>
    <tr>
            <td><input type="number" value="1" name="str[]" readonly></td>
          <td><input type="text" class="form-control" id="name" name="name[]" required></td>
          <td><input type="number" class="form-control num" id="num" name="num[]" value="" required></td>
          <td><input  type="text" class="form-control price"  id="price" name="price[]" value="" required></td>
          <td><input type="text" class="form-control sum" id="sum" name="sum[]" value="" readonly></td>
          <td><a class="deleteRow" href="#"><font color="red">[-]</font></a></td>
</tr>
    <tr>
            <td><input type="number" value="1" name="str[]" readonly></td>
          <td><input type="text" class="form-control" id="name" name="name[]" required></td>
          <td><input type="number" class="form-control num" id="num" name="num[]" value="" required></td>
          <td><input  type="text" class="form-control price"  id="price" name="price[]" value="" required></td>
          <td><input type="text" class="form-control sum" id="sum" name="sum[]" value="" readonly></td>
          <td><a class="deleteRow" href="#"><font color="red">[-]</font></a></td>
</tr>
    <tr>
            <td><input type="number" value="1" name="str[]" readonly></td>
          <td><input type="text" class="form-control" id="name" name="name[]" required></td>
          <td><input type="number" class="form-control num" id="num" name="num[]" value="" required></td>
          <td><input  type="text" class="form-control price"  id="price" name="price[]" value="" required></td>
          <td><input type="text" class="form-control sum" id="sum" name="sum[]" value="" readonly></td>
          <td><a class="deleteRow" href="#"><font color="red">[-]</font></a></td>
</tr>
    <tr>
            <td><input type="number" value="1" name="str[]" readonly></td>
          <td><input type="text" class="form-control" id="name" name="name[]" required></td>
          <td><input type="number" class="form-control num" id="num" name="num[]" value="" required></td>
          <td><input  type="text" class="form-control price"  id="price" name="price[]" value="" required></td>
          <td><input type="text" class="form-control sum" id="sum" name="sum[]" value="" readonly></td>
          <td><a class="deleteRow" href="#"><font color="red">[-]</font></a></td>
</tr>
    <tr>
            <td><input type="number" value="1" name="str[]" readonly></td>
          <td><input type="text" class="form-control" id="name" name="name[]" required></td>
          <td><input type="number" class="form-control num" id="num" name="num[]" value="" required></td>
          <td><input  type="text" class="form-control price"  id="price" name="price[]" value="" required></td>
          <td><input type="text" class="form-control sum" id="sum" name="sum[]" value="" readonly></td>
          <td><a class="deleteRow" href="#"><font color="red">[-]</font></a></td>
</tr>
      </table>
<script>
var countOfFields = 5
, curFieldNameId = 0;  // что бы не было ошибки

function repos () {
	var rows = document.getElementById('parentId').tBodies[0].rows;
	var i;
	for (i = 0; i < rows.length; i++) {
		rows[i].cells[0].children[0].value = i+1;
	}
}

parentId.addEventListener('click', function(evt){
  if(evt.target.closest('.deleteRow')) {
    evt.target.closest('tr').remove();
    countOfFields--;
    curFieldNameId = curFieldNameId-1;
	repos();
  }
})

repos();
</script>
</body>
</html>
Ответить с цитированием
  #15 (permalink)  
Старый 14.10.2020, 20:22
l30 l30 вне форума
Интересующийся
Отправить личное сообщение для l30 Посмотреть профиль Найти все сообщения от l30
 
Регистрация: 26.09.2020
Сообщений: 11

Сейчас происходит так, есть 4 поля, добавленных пользователем:
1
2
3
4
Он решил удалить одно поле например 2 получается
1
3
4
при этом если он опять нажмет на кнопку добавить поле то нумерация идет так
1
3
4
4
5
и .т.д
нужно чтобы при удалении обновлялась нумерация и следуующие добавленные поля шли по порядку
Ответить с цитированием
  #16 (permalink)  
Старый 14.10.2020, 20:28
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,736

Сообщение от l30
Да так и есть, далее все обрабатывает php и формирует документ. Нумерация на клиенте нужна для наглядности пользователю ...
Тогда не занимайтесь чепухой, пользователю "для наглядности" все равно недоступны имена полей, а пронумеровать для него, это взять на странице количество всех блоков с полями, и проставить им номера, если это так уж и необходимо. Зачем же вы сами поля терзаете, да еще перезаписываете их имена при удалении добавленного? Тут подобная задача, и выполняется проще.

Вот только что у вас является ограничением числа их на странице? Если вы следите за количеством записей в базе, которые в нее еще можно добавить, еще можно понять. В противном случае есть только одно ограничение накладываемое сервером - количество переменных в запросе, в РНР по умолчанию это вроде бы 1000, и увеличивать его, это понижать устойчивость сервера к одному из видов атаки. Переменных, то есть полей формы, а не блоков добавляемых на странице. В противном случае я не знаю к чему это у вас.

Последний раз редактировалось laimas, 14.10.2020 в 20:30.
Ответить с цитированием
  #17 (permalink)  
Старый 14.10.2020, 20:33
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 639

Сообщение от l30
если он опять нажмет на кнопку добавить поле
А где эта секретная кнопка?
И где код, который обрабатывает нажатие?
Ответить с цитированием
  #18 (permalink)  
Старый 14.10.2020, 20:38
l30 l30 вне форума
Интересующийся
Отправить личное сообщение для l30 Посмотреть профиль Найти все сообщения от l30
 
Регистрация: 26.09.2020
Сообщений: 11

Вот код который обрабатывает добавление
function addField() {

       countOfFields++;

       curFieldNameId++;

       var div = document.createElement("tr");
       

       div.innerHTML = "<td><input name=\"str[" + curFieldNameId + "]\" type=\"number\" value=\"" + curFieldNameId + "\" style=\"width: 50px; border:0px;\" readonly>&nbsp;&nbsp;</td><td><input style=\"width:450px;\" type=\"text\" class=\"form-control\" id=\"name\" name=\"name[" + curFieldNameId + "]\" required></td><td><input style=\"width:100px;\" type=\"number\" onkeyup=\"this.value = this.value.replace(/[^\\d]/g,'');\" class=\"form-control num\" id=\"num\" name=\"num[" + curFieldNameId + "]\" required></td><td><input style=\"width:200px;\" type=\"text\" class=\"form-control price\" id=\"price\" onkeyup=\"this.value = this.value.replace(/[^\\-?\\d+(\\.\\d{0,})?]/g,'');\" name=\"price[" + curFieldNameId + "]\" required></td><td><input type=\"text\" class=\"form-control sum\" id=\"sum\" name=\"sum[" + curFieldNameId + "]\" readonly></td><td><a class=\"deleteRow\" href=\"#\"><font color=\"red\">[-]</font></a></td>";

       document.getElementById("parentId").appendChild(div);

   return false;
  }


Вот кнопка
<a onclick="return addField()" href="#" >+</a>
Ответить с цитированием
  #19 (permalink)  
Старый 14.10.2020, 20:54
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 639

Cтроку 12 запишите так
document.getElementById("parentId").tBodies[0].appendChild(div)
Ответить с цитированием
  #20 (permalink)  
Старый 14.10.2020, 20:57
l30 l30 вне форума
Интересующийся
Отправить личное сообщение для l30 Посмотреть профиль Найти все сообщения от l30
 
Регистрация: 26.09.2020
Сообщений: 11

Да теперь все как надо, спасибо огромное!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как выделить убрать выбранный текст с динамическими полями prog77 jQuery 3 19.07.2017 22:56