Прошу помощи
Опыт в 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>
