时间戳

首页 > 解决方案 > 如何在html表中选择一行乘以2列并在第三列中显示结果

javascript - 如何在html表中选择一行乘以2列并在第三列中显示结果

问题描述

我有 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 将这个表数据发送到后端，请建议做这种事情的最佳实践是什么。

标签： javascriptjqueryhtmlhtml-tabledatatable

解决方案

您不需要多个功能来完成此操作。您可以定位最近的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>

推荐阅读