Как выбрать строку в html таблице, умножьте 2 столбца и покажите результаты в третьем столбце.

Question

У меня есть HTML-таблица (с таблицей данных), с такими столбцами, как цена продукта, количество продукта и общее количество, я хочу обновить общий столбец, когда цена и количество заполнены.

 <table id="example1" class="table table-bordered table-striped dataTable " role="grid" aria-describedby="example1_info">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Price</th>                           
                <th>Quantity</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody> 
            <?php 
                while($user = $products->fetch_assoc()){
                  ?>
                  <tr>
                    <td><?=$user['id']?></td>
                    <td><?=$user['name']?></td>
                    <td>
                      <input type="number" class="pr price" name="row_id_<?=$user["id"] ?>" pr_id='<?=$user['id']?>'  value="" 
                      onchange= "add_to_p_total(this)" style="width: 60px; height: 26px"> 
                    </td>    
                    <td>
                      <input type="number" class="pr qty" name="row_id_<?=$user["id"] ?> pr_id='<?=$user['id']?>' value="" 
                      onchange= "add_to_q_total(this)" style="width: 60px; height: 26px">
                    </td>
                     <td>
                       <input type="number" name="row_id_<?=$user["id"] ?>  class="pr total_price" style="width: 60px; height: 26px">
                     </td>
                  </tr>
                  <?
                }
            ?>
            <tr>
                    <td></td>
                    <td></td>
                    <td><strong id="p_total"></strong></td>
                    <td>
                      <strong id="q_total"></strong>
                    </td>
                  </tr>
        </tbody>
        <tfoot>
           <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Price</th>                             
                <th>Quantity</th> 
                <th>Total</th>             
            </tr>
        </tfoot>
    </table>

Проблема в таблицединамически генерируется с использованием PHP и базы данных, поэтому в этом случае требуется какой-то динамический js. Я предполагаю, что мне нужно каким-то образом получить доступ к столбцам с индексами и несколькими индексами [2] и [3].Я не знаю, как это сделать, используя jquery или js.

Позже мне также необходимо отправить данные этой таблицы в бэкэнд с помощью AJAX. Пожалуйста, предложите, как лучше всего делать такие вещи.

Answer 1

Вам не нужно несколько функций для этого. Вы можете выбрать ближайший элемент tr . Затем вы можете найти конкретные входные данные для расчета значения.

Обратите внимание: Поскольку вы умножаете значения, если входное значение пустое, тогда принимайте 1 в качестве значения по умолчанию.

Демо:

function add_to_total(el){
  var parent = $(el).closest('tr');
  var price = parent.find('.price').val() == "" ? 1 : parent.find('.price').val();
  var qty = parent.find('.qty').val() == "" ? 1 : parent.find('.qty').val();
  var total = price * qty;
  parent.find('.total_price').val(total);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered table-striped dataTable " role="grid" aria-describedby="example1_info">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Price</th>                           
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody> 

    <tr>
      <td>111</td>
      <td>John</td>
      <td>
        <input type="number" class="pr price" name="" pr_id="" value="" onchange= "add_to_total(this)" style="width: 60px; height: 26px"> 
      </td>    
      <td>
        <input type="number" class="pr qty" name="" value="" 
        onchange= "add_to_total(this)" style="width: 60px; height: 26px">
      </td>
      <td>
        <input type="number" name=""  class="pr total_price" style="width: 60px; height: 26px">
      </td>
    </tr>
    <tr>
      <td>222</td>
      <td>Jane</td>
      <td>
        <input type="number" class="pr price" name="" pr_id="" value="" onchange= "add_to_total(this)" style="width: 60px; height: 26px"> 
      </td>    
      <td>
        <input type="number" class="pr qty" name="" value="" 
        onchange= "add_to_total(this)" style="width: 60px; height: 26px">
      </td>
      <td>
        <input type="number" name=""  class="pr total_price" style="width: 60px; height: 26px">
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td><strong id="p_total"></strong></td>
      <td>
      <strong id="q_total"></strong>
    </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Price</th>                             
      <th>Quantity</th> 
      <th>Total</th>             
    </tr>
  </tfoot>
</table>