Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   2 скрипта сдружить: добавление строк + перемножение в каждой строке (https://javascript.ru/forum/dom-window/85465-2-skripta-sdruzhit-dobavlenie-strok-peremnozhenie-v-kazhdojj-stroke.html)

Sheratan 13.09.2023 11:24

2 скрипта сдружить: добавление строк + перемножение в каждой строке
 
Прошу помощи
Опыт в JS минимален, не ругайте если туплю...
Имеется таблица с вложенными таблицами к которым добавляются строки (успешно) в каждой вложенной таблице есть строки в которых есть input цены и количества, при вводе которых вычисляется сумма (успешно)
Проблема в том, что добавленные строки имеют ID первой скопированной строки и соответственно перемножение не работает.
(ID назначаются при формировании страницы и берутся из БД)
Как понимаю есть два варианта
1. назначать уникальный ID полям input при создании строки
2. научить скрипт перемножения брать input только из своей строки
Благодарю за любую помощь
Исходный Код
function addRow(tableID) {  
            
			var table = document.getElementById(tableID);
			var rowCount = table.rows.length;
			var row = table.insertRow(rowCount);
			var colCount = table.rows[0].cells.length;
			for(var i=0; i<colCount; i++) {
				var newcell	= row.insertCell(i);
				newcell.innerHTML = table.rows[0].cells[i].innerHTML;
				switch(newcell.childNodes[0].type) {
					case "text":
                    if (table.rows[0].cells[i].id == "str_qty") 
                        {newcell.childNodes[0].value = "1";}
                    else
                        {newcell.childNodes[0].value = "";}
							break;
					case "checkbox":
							newcell.childNodes[0].checked = false;
							break;
					case "select-one":
							newcell.childNodes[0].selectedIndex = 0;
							break;
				}
			}
		}

function calc_sum(num) {
    const id = (str) => document.getElementById(str);
    var price = id("price_"+num).value;
    var qty = id("qty_"+num).value;
    var sum = price*qty;
    document.getElementById("sum_"+num).value = sum;
}

<table style="background-color: #eee; border: none; width: 100%;">
<tr><td style="font-weight: bold; ">Первый элемент</td><td style="text-align: right; font-size: x-small;   "></td></tr>
<tr>
<td colspan="2">
<table style="border: none; width: 100%;" id="dataTable12">
<tbody>
<tr>
	<td><input type="checkbox" value="" name="tab_sel[]" /></td>
	<td><input type="text" value="" name="item[12][name][]" placeholder="Название" size="90" /></td>

	<td><input type="text" value="" name="item[12][price][]" id="price_101" oninput="calc_sum(101)" 
      placeholder="Цена"  size="8" /></td>
      
	<td id="str_qty"><input type="text" value="1" name="item[12][qty][]" id="qty_101" oninput="calc_sum(101)" 
      placeholder="Кол-во" size="3" /></td>
      
	<td><input type="text" value="" name="item[12][sum][]" id="sum_101" placeholder="Сумма" size="10" readonly="" /></td>
</tr>
</tbody>
</table>
<input type="button" value="-" onclick="deleteRow('dataTable12')" /><input type="button" value="+" onclick="addRow('dataTable12')" />
</td>
</tr>


<tr><td style="font-weight: bold; ">Второй элемент</td><td style="text-align: right; font-size: x-small;   "></td></tr>
<tr>
<td colspan="2">
<table style="border: none; width: 100%;" id="dataTable13">
<tbody>
<tr>
	<td><input type="checkbox" value="" name="tab_sel[]" /></td>
	<td><input type="text" value="" name="item[13][name][]" placeholder="Название" size="90" /></td>

	<td><input type="text" value="" name="item[13][price][]" id="price_201"  oninput="calc_sum(201)" 
      placeholder="Цена" size="8" /></td>

	<td id="str_qty"><input type="text" value="1" name="item[13][qty][]" id="qty_201" oninput="calc_sum(201)" 
      placeholder="Кол-во" size="3" /></td>
     
	<td><input type="text" value="" name="item[13][sum][]" id="sum_201" placeholder="Сумма" size="10" readonly="" /></td>
</tr>
<tr>
	<td><input type="checkbox" value="" name="tab_sel[]" /></td>
	<td><input type="text" value="" name="item[13][name][]" placeholder="Название" size="90" /></td>

	<td><input type="text" value="" name="item[13][price][]" id="price_202"  oninput="calc_sum(202)" 
      placeholder="Цена" size="8" /></td>

	<td id="str_qty"><input type="text" value="1" name="item[13][qty][]" id="qty_202" oninput="calc_sum(202)" 
      placeholder="Кол-во" size="3" /></td>
     
	<td><input type="text" value="" name="item[13][sum][]" id="sum_202" placeholder="Сумма" size="10" readonly="" /></td>
</tr>
</tbody>
</table>
<input type="button" value="-" onclick="deleteRow('dataTable13')" /><input type="button" value="+" onclick="addRow('dataTable13')" />
</td>
</tr>

</table>

рони 13.09.2023 12:00

Цитата:

Сообщение от Sheratan
2. научить скрипт перемножения брать input только из своей строки

function calc_sum() {
    let tr = event.target.closest('tr');
    let [price, qty, sum] = tr.querySelectorAll('[name*="price"],[name*="qty"],[name*="sum"]');
    if(price && qty && sum)sum.value = price.value * qty.value;
}

Sheratan 13.09.2023 12:23

Не сработало...
ни в старых не в новых строках
Что-то нужно менять в HTML коде?

рони 13.09.2023 12:46

Sheratan,
function calc_sum(event) уберите event function calc_sum()

Sheratan 13.09.2023 12:50

Отлично!
Премного благодарен!!!
:thanks:


Часовой пояс GMT +3, время: 09:59.