добавление расчета строк и помощь по добавлению/удалению строк

  • Автор темы Богдан Рустямов
  • 35
  • Обновлено
  • 16, May 2024
  • #1
Я пытаюсь создать шаблон счета-фактуры, который будет рассчитывать сумму каждой строки, а также иметь возможность добавлять и удалять строки.

Мне удалось создать 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>
HTML: Заранее спасибо

Богдан Рустямов


Рег
03 Feb, 2013

Тем
1

Постов
2

Баллов
12
  • 09, Jun 2024
  • #2
То, что вы пытаетесь сделать, было бы намного проще, если бы вы использовали такую структуру, как jQuery, для добавления/удаления строк. С точки зрения пользовательского интерфейса было бы лучше иметь форму ввода в одну строку и чтобы кнопка сохраняла содержимое в массив для расчета и отображения.

Когда строки отображаются, вы можете добавить кнопки к каждой строке для редактирования или удаления.

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

(Если вы не можете изменить серверную часть). Если вы можете изменить серверную часть, вы можете просто отправить массив в формате json и декодировать его на внутренней стороне.

Дайте мне знать, если вам все еще нужна помощь с этим.

Я делал то же самое много раз раньше.
 

_GRAFF_


Рег
13 Feb, 2012

Тем
1

Постов
3

Баллов
13
Тем
49554
Комментарии
57426
Опыт
552966

Интересно