Умножение чисел в каждой строке table?
У меня такая проблема. Как сделать чтобы в строке tr число из td умножалось на число из другого td? Таких строк может быть неограниченное количество. Данные вводятся через input. Вот так выглядит структура
<table class="eb" id="printMe">
<thead>
<tr>
<th class="pc-column-header gb">
<div class="j2 r2 o1 v1" style="--mdc-ripple-fg-size:24px; --mdc-ripple-fg-scale:1.66667; --mdc-ripple-left:8px; --mdc-ripple-top:8px;">
<input class="k2" type="checkbox">
<div class="l2">
<svg class="p2" viewBox="0 0 24 24"><path class="s2" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path></svg>
<div class="mdc-checkbox__mixedmark">
</div>
</div>
</div>
</th>
<th aria-sort="none" class="pc-column-header o9">
<i class="material-icons hb x">arrow_upward</i>
<i class="material-icons y x">arrow_downward</i>Наименование</th>
<th aria-sort="none" class="pc-column-header p9">
<i class="material-icons hb x">arrow_upward</i>
<i class="material-icons y x">arrow_downward</i>Ед-ца измирения</th>
<th aria-sort="none" class="pc-column-header p9">
<i class="material-icons hb x">arrow_upward</i>
<i class="material-icons y x">arrow_downward</i>Цена за единицу</th>
<th aria-sort="none" class="pc-column-header p9">
<i class="material-icons hb x">arrow_upward</i>
<i class="material-icons y x">arrow_downward</i>Количество</th>
<th aria-sort="none" class="pc-column-header p9">
<i class="material-icons hb x">arrow_upward</i>
<i class="material-icons y x">arrow_downward</i>Сумма</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="fb">
<td class="gb">
<div class="j2 r2 o1 v1" style="--mdc-ripple-fg-size:24px; --mdc-ripple-fg-scale:1.66667; --mdc-ripple-left:8px; --mdc-ripple-top:8px;">
<input class="k2" type="checkbox">
<div class="l2"><svg class="p2" viewBox="0 0 24 24"><path class="s2" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path></svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</td>
<td>пол</td>
<td class="p9">m2</td>
<td class="p9" name="price">300</td>
<td class="p9" name="quantity">10</td>
<td id="result"></td>
<td class="p9">
<button type="button" class="vb c2 pc-btn-edit-line o1" title="Изменить"><i class="material-icons">mode_edit</i></button>
</td>
</tr>
<tr class="fb">
<td class="gb">
<div class="j2 r2 o1 v1" style="--mdc-ripple-fg-size:0px; --mdc-ripple-fg-scale:NaN; --mdc-ripple-left:0px; --mdc-ripple-top:0px;">
<input class="k2" type="checkbox">
<div class="l2"><svg class="p2" viewBox="0 0 24 24"><path class="s2" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path></svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</td>
<td>стена</td>
<td class="p9">м2</td>
<td class="p9" name="price">400</td>
<td class="p9" name="quantity">15</td>
<td id="result"></td>
<td class="p9">
<button type="button" class="vb c2 pc-btn-edit-line o1" title="Изменить"><i class="material-icons">mode_edit</i></button>
</td>
</tr>
</tbody>
</table>
Ответы (1 шт):
Автор решения: Igor
→ Ссылка
function recalculate() {
document.querySelectorAll('#printMe tbody tr').forEach(
row => row.querySelector('#result').textContent =
row.querySelector('[name="price"]').textContent *
row.querySelector('[name="quantity"]').textContent
);
}
recalculate();
<table class="eb" id="printMe">
<thead>
<tr>
<th class="pc-column-header gb">
<div class="j2 r2 o1 v1" style="--mdc-ripple-fg-size:24px; --mdc-ripple-fg-scale:1.66667; --mdc-ripple-left:8px; --mdc-ripple-top:8px;">
<input class="k2" type="checkbox">
<div class="l2">
<svg class="p2" viewBox="0 0 24 24"><path class="s2" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path></svg>
<div class="mdc-checkbox__mixedmark">
</div>
</div>
</div>
</th>
<th aria-sort="none" class="pc-column-header o9">
<i class="material-icons hb x">arrow_upward</i>
<i class="material-icons y x">arrow_downward</i>Наименование</th>
<th aria-sort="none" class="pc-column-header p9">
<i class="material-icons hb x">arrow_upward</i>
<i class="material-icons y x">arrow_downward</i>Ед-ца измирения</th>
<th aria-sort="none" class="pc-column-header p9">
<i class="material-icons hb x">arrow_upward</i>
<i class="material-icons y x">arrow_downward</i>Цена за единицу</th>
<th aria-sort="none" class="pc-column-header p9">
<i class="material-icons hb x">arrow_upward</i>
<i class="material-icons y x">arrow_downward</i>Количество</th>
<th aria-sort="none" class="pc-column-header p9">
<i class="material-icons hb x">arrow_upward</i>
<i class="material-icons y x">arrow_downward</i>Сумма</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="fb">
<td class="gb">
<div class="j2 r2 o1 v1" style="--mdc-ripple-fg-size:24px; --mdc-ripple-fg-scale:1.66667; --mdc-ripple-left:8px; --mdc-ripple-top:8px;">
<input class="k2" type="checkbox">
<div class="l2"><svg class="p2" viewBox="0 0 24 24"><path class="s2" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path></svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</td>
<td>пол</td>
<td class="p9">m2</td>
<td class="p9" name="price">300</td>
<td class="p9" name="quantity">10</td>
<td id="result"></td>
<td class="p9">
<button type="button" class="vb c2 pc-btn-edit-line o1" title="Изменить"><i class="material-icons">mode_edit</i></button>
</td>
</tr>
<tr class="fb">
<td class="gb">
<div class="j2 r2 o1 v1" style="--mdc-ripple-fg-size:0px; --mdc-ripple-fg-scale:NaN; --mdc-ripple-left:0px; --mdc-ripple-top:0px;">
<input class="k2" type="checkbox">
<div class="l2"><svg class="p2" viewBox="0 0 24 24"><path class="s2" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path></svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</td>
<td>стена</td>
<td class="p9">м2</td>
<td class="p9" name="price">400</td>
<td class="p9" name="quantity">15</td>
<td id="result"></td>
<td class="p9">
<button type="button" class="vb c2 pc-btn-edit-line o1" title="Изменить"><i class="material-icons">mode_edit</i></button>
</td>
</tr>
</tbody>
</table>