- 16, May 2024
- #1
Я пытаюсь создать шаблон счета-фактуры, который будет рассчитывать сумму каждой строки, а также иметь возможность добавлять и удалять строки.
Мне удалось создать javascript, который добавляет новые строки, но я не могу понять, как удалить последнюю добавленную строку, а также как рассчитать общее количество каждой строки, а затем вычислить общее количество всех строк, мой код пока приведен ниже.
Может кто-нибудь помочь, пожалуйста
Мне удалось создать javascript, который добавляет новые строки, но я не могу понять, как удалить последнюю добавленную строку, а также как рассчитать общее количество каждой строки, а затем вычислить общее количество всех строк, мой код пока приведен ниже.
Может кто-нибудь помочь, пожалуйста
<form method="post" action="" name="services">
<button type="button" onClick="addRow()">Add New Row</button>
<table class="table table-sm">
<thead>
<tr>
<td><strong>Service</strong></td>
<td class="text-xs-center"><strong>Service Price</strong></td>
<td class="text-xs-right"><strong>Total</strong></td>
</tr>
</thead>
<tbody id="maindata">
<tr id="newservicerow">
<td class="text-xs-center"><input type="text" pattern="[A-Za-z]" onkeydown="return /[a-z]/i.test(event.key)" onblur="if (this.value == '') {this.value = 'Type Letters Only';}" onfocus="if (this.value == 'Type Letters Only') {this.value = '';}" class="form-control" /></td>
<td class="text-xs-center"><input type="number" min="0.01" step="0.01" name="form-control" class="form-control"/></td>
<td class="text-xs-right">£ROW CALCULATION</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="highrow"></td>
<td class="highrow"></td>
<td class="highrow text-xs-right">Total: £CALCULATED FROM TOTAL ROWS ABOVE</td>
</tr>
</tbody>
</table>
</form>
<script>
function addRow() {
// Reference the first <tr> as row
var row = document.getElementById('newservicerow');
// Reference the first <tbody> as main
var main = document.getElementById('maindata');
// Clone row
var clone = row.cloneNode(true);
// Remove clone's id
clone.removeAttribute('id');
// Clean clone of any data
clone.querySelectorAll('input').forEach(function(inp) {
inp.value = ''
});
// Append clone as the last child of main
main.appendChild(clone);
}
</script>
![[Digital] Школа интернет маркетологов от Марии Солодар](/assets/images/icons/forum5.png){kind=icon}
![[Сьюзен Сарбек, Константин Мольков] Рисуем маслом и пастелью. Проблема передачи света и цвета](/assets/images/icons/forum4.png){kind=icon}
![[Иван Д] Фриланс по новому. Уникальный способ заработка](/assets/images/icons/forum7.png){kind=icon}
![[Кирилл Сенкевич - Html Academy] Интенсивный онлайн‑курс Профессиональный PHP, уровень 1](/assets/images/icons/forum6.png){kind=icon}