Таблица выставления счета с динамическими полями

[l30]

Есть такая таблица с добавлением полей произвольного кол-ва:

<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>
</tr>
      </table>
    Итого:
  <input type="number"  class="receivable" id="receivable" name="receivable[]"  value="" readonly>

 Итого к получению:<input type="number"  class="receivable" id="receivable" name="receivable[]"  value="" readonly>

И скрипт js:

var countOfFields = 1; // Текущее число полей
var curFieldNameId = 1; // Уникальное значение для атрибута name
var maxFieldLimit = 80; // Максимальное число возможных полей
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;
}
function addField() {
 // Проверяем, не достигло ли число полей максимума
 if (countOfFields >= maxFieldLimit) {
 alert("Число полей достигло своего максимума = " + maxFieldLimit);
 return false;
 }
 // Увеличиваем текущее значение числа полей
 countOfFields++;
 // Увеличиваем ID
 curFieldNameId++;
 
 // Создаем элемент ДИВ
 var div = document.createElement("tr");
 // Добавляем HTML-контент с пом. свойства innerHTML
 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);
 // Возвращаем false, чтобы не было перехода по сслыке
 return false;
}
$('#score').on('change', function(event) {
event.preventDefault();
var sum = 0;
var $sum = $(".sum"), $num = $(".num"), $price = $(".price");
$num.each(function(i) {
  var result = parseInt($num.eq(i).val()) * parseFloat($price.eq(i).val());
  if(isNaN(result)) {
    result = 0;
  }
  $sum.eq(i).val(result.toFixed(2));
});
var total = 0;
var receivable = 0;
var $total = $(".sum");
$total.each(function(i) {
  total += parseFloat($total.eq(i).val());
});
tmp = total/100*6;
receivable = total - tmp;
$('.total').val(parseFloat(total.toFixed(2)));
$('.receivable').val(parseFloat(receivable.toFixed(2)));
});

При добавлении нового поля присваевается порядковый номер в поле <input name=srt[]>. Нужно сделать так чтобы, допустим, есть 3 добавленных поля с порядковыми номерами 1,2,3. при удалении поля (на знак -) например под номером 1, все следующие поля поменяли свои номера с 2 и 3 на 1 и 2 и пересчиталась сумма полей. Как это реализовать?

[voraa]

Ну при добавлении или удалении строк в таблице пробежаться в цикле по строкам и поменять значения. Заодно и пересчитать все. Какие проблемы?
Только цикл нужен не по строкам table, а по строкам tbody.
Заодно уберите все id. Или присваивайте им уникальные значения.

И в комментариях не пишите про DIV, а то его долго искать приходится.

[l30]

Проблема в незнании js. Выше код не мой

[voraa]

Ну посмотрите так

var countOfFields = 1; // Текущее число полей
var curFieldNameId = 1; // Уникальное значение для атрибута name
var maxFieldLimit = 80; // Максимальное число возможных полей

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

// Изменяем номер строки
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;
	}
}

// Пересчитать "Итого"
function calcTotal () {
	var total = 0;
	var receivable = 0;
	var $total = $(".sum");
	$total.each(function(i) {
		total += parseFloat($total.eq(i).val());
	});
	tmp = total/100*6;
	receivable = total - tmp;
	$('.total').val(parseFloat(total.toFixed(2)));
	$('.receivable').val(parseFloat(receivable.toFixed(2)));
}

function deleteField(a) {
	 if (countOfFields > 1)
	 {
 // Получаем доступ к ДИВу, содержащему поле
		var contDiv = a.parentNode;
 // Удаляем этот ДИВ из DOM-дерева
		contDiv.parentNode.removeChild(contDiv);
 // Уменьшаем значение текущего числа полей
		repos();
		calcTotal(); 
	}
 // Возвращаем false, чтобы не было перехода по сслыке
	return false;
}
function addField() {
 // Проверяем, не достигло ли число полей максимума
	 if (countOfFields >= maxFieldLimit) {
		 alert("Число полей достигло своего максимума = " + maxFieldLimit);
		 return false;
	 }
 // Увеличиваем текущее значение числа полей
	 countOfFields++;
 // Увеличиваем ID
	 curFieldNameId++;
  
 // Создаем элемент ДИВ
	 var div = document.createElement("tr");
 // Добавляем HTML-контент с пом. свойства innerHTML
	 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);
	 repos ()
 // Возвращаем false, чтобы не было перехода по сслыке
 return false;
}


$('#score').on('change', function(event) {
	event.preventDefault();
	var sum = 0;
	var $sum = $(".sum"), $num = $(".num"), $price = $(".price");
	$num.each(function(i) {
		var result = parseInt($num.eq(i).val()) * parseFloat($price.eq(i).val());
		if(isNaN(result)) {
			result = 0;
		}
		$sum.eq(i).val(result.toFixed(2));
	});
	calcTotal();
});

[l30]

Сумма пересчитывается, но порядковые номера не изменяются

[voraa]

Не изменяются вообще? При удалении? При добавлении?
Не имея всего кода отлаживать невозможно.
Вот такой простой пример перенумеровывает строки в таблице

<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>
</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>
</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>
</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>
</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>
</tr>
      </table>
<script>
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;
	}
}
repos()
</script>
</body>
</html>

[laimas]

var curFieldNameId = 1; // Уникальное значение для атрибута name

Это бесполезное и никчемное занятие на клиенте, и совсем не нужное для сервера в той архитектуре имен, что есть у автора.

[voraa]

Сообщение от voraa
var curFieldNameId = 1; // Уникальное значение для атрибута name
Это бесполезное и никчемное занятие на клиенте, и совсем не нужное для сервера в той архитектуре имен, что есть у автора.

Я не собираюсь переписывать автору весь код. Тем более, вряд ли он тут весь.
Просили сделать только пересчет и перенумерацию.

[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, ..., они его интересуют.

[l30]

При добавлении нумерация происходит. Если добавить поля то нумерация 1,2,3 и т.д. Но если удалить первое поле (1), то все остальные поля остаются со значением 2,3 а надо, чтобы обновлялись на 1,2 или допустим имея уже 5 добавленных строк, удалить например 3, то следующие две строки должны поменять свою нумерацию с 4 и 5 на 3 и 4