Таблица выставления счета с динамическими полями
Есть такая таблица с добавлением полей произвольного кол-ва:
<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 и пересчиталась сумма полей. Как это реализовать? |
Ну при добавлении или удалении строк в таблице пробежаться в цикле по строкам и поменять значения. Заодно и пересчитать все. Какие проблемы?
Только цикл нужен не по строкам table, а по строкам tbody. Заодно уберите все id. Или присваивайте им уникальные значения. И в комментариях не пишите про DIV, а то его долго искать приходится. |
Проблема в незнании 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 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> </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();
});
|
Сумма пересчитывается, но порядковые номера не изменяются
|
Не изменяются вообще? При удалении? При добавлении?
Не имея всего кода отлаживать невозможно. Вот такой простой пример перенумеровывает строки в таблице
<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>
|
Цитата:
|
Цитата:
Просили сделать только пересчет и перенумерацию. |
Цитата:
Если имена типа 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, ..., они его интересуют. |
При добавлении нумерация происходит. Если добавить поля то нумерация 1,2,3 и т.д. Но если удалить первое поле (1), то все остальные поля остаются со значением 2,3 а надо, чтобы обновлялись на 1,2 или допустим имея уже 5 добавленных строк, удалить например 3, то следующие две строки должны поменять свою нумерацию с 4 и 5 на 3 и 4
|
| Часовой пояс GMT +3, время: 11:34. |