Есть такая таблица с добавлением полей произвольного кол-ва:
<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> </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 и пересчиталась сумма полей. Как это реализовать?