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> |
Цитата:
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; } |
Не сработало...
ни в старых не в новых строках Что-то нужно менять в HTML коде? |
Sheratan,
function calc_sum(event) уберите event function calc_sum() |
Отлично!
Премного благодарен!!! :thanks: |
Часовой пояс GMT +3, время: 09:59. |