Умножение чисел в каждой строке 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>

→ Ссылка