JavaScript中求和循环价格和数量输入行

vnzz0bqm 于 2023-05-21 发布在 Java

关注(0)|答案(4)|浏览(98)

我有这样图像

我想对每一行求和，金额从price****quantity计算得出，但当我输入price和quantity时每一行都是表单金额未填写
我尝试循环每一行并获取如下值

function total_amount(){
    var table = document.getElementById('line_item');
    let qty = document.getElementById('quantity').value;
    let unit = document.getElementById('unit').value;
    var cellCount = table.rows[0].cells.length; 
    total =0 
    for(var i=0;i<table.rows.length;i++){
        let total = qty[i] * unit[i];
        document.getElementById('amount').value = total;    
        
    }
}

这是我的html：

<table class="table table-striped" id="line_item" data-togle="table" data-sort-stable="true">
  <thead>
    <tr>
      <th>
        Product
      </th>
      <th>
        Quantity
      </th>
      <th>
        Price Unit
      </th>
      <th>
        Amount
      </th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td id="col0">
        <input class="form-control" type="text" placeholder="Product">
      </td>
      <td id="col1">
        <input class="form-control" type="number" placeholder="Quantity" id="quantity" onblur="total_amount()">
      </td>
      <td id="col2">
        <input class="form-control" type="number" placeholder="Price Unit" id="unit" onblur="total_amount()">
      </td>
      <td id="col3">
        <input class="form-control" type="number" placeholder="Amount" id="amount" readonly>
      </td>
      <td id="col4">
        <button class="btn btn-danger btn-sm" aria-label="Delete" id="delete" onclick="delete_item()">
          <i class="fas fa-trash"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>

但金额未填写，
i期望每一行的金额是SUMfrom each price * quantity，如何做到这一点？谢谢

JavaScript

来源：https://stackoverflow.com/questions/75589913/sum-loop-price-and-quantity-input-rows-in-javascript

4条答案

按热度按时间

kkih6yb81#

这个应该对你有用

function total_amount(){
        var table = document.getElementById('line_item');
        for(var i=1;i<table.rows.length;i++){
            qty = table.rows[i].cells[1].getElementsByTagName("input")[0].value
            unit = table.rows[i].cells[2].getElementsByTagName("input")[0].value
            table.rows[i].cells[3].getElementsByTagName("input")[0].value = qty * unit;
        }
    }

赞(0）回复(0）举报 2023-05-21

8ulbf1ek2#

你说你正在移动行，这意味着你很可能有多个元素具有相同的id。
你可以这样做：

function total_amount(ele) {
  var tr = ele.parentNode.parentNode;
  let qty = tr.querySelector('.quantity').value;
  let unit = tr.querySelector('.unit').value;
  let total = qty * unit;
  tr.querySelector('.amount').value = total;
}

然后在你的输入上我已经将this添加到函数中并将id移到类中

<input class="form-control quantity" type="number" placeholder="Quantity" id="" onblur="total_amount(this)">

function total_amount(ele) {
  var tr = ele.parentNode.parentNode;
  let qty = tr.querySelector('.quantity').value;
  let unit = tr.querySelector('.unit').value;
  let total = qty * unit;
  tr.querySelector('.amount').value = total;
}

<table class="table table-striped" id="line_item" data-togle="table" data-sort-stable="true">
  <thead>
    <tr>
      <th>
        Product
      </th>
      <th>
        Quantity
      </th>
      <th>
        Price Unit
      </th>
      <th>
        Amount
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td id="col0">
        <input class="form-control" type="text" placeholder="Product">
      </td>
      <td id="col1">
        <input class="form-control quantity" type="number" placeholder="Quantity" id="" onblur="total_amount(this)">
      </td>
      <td id="col2">
        <input class="form-control unit" type="number" placeholder="Price Unit" id="" onblur="total_amount(this)">
      </td>
      <td id="col3">
        <input class="form-control amount" type="number" placeholder="Amount" id="" readonly>
      </td>
      <td id="col4">
        <button class="btn btn-danger btn-sm" aria-label="Delete" id="delete" onclick="delete_item()">
          <i class="fas fa-trash"></i>
        </button>
      </td>
    </tr>
    <tr>
      <td id="col0">
        <input class="form-control" type="text" placeholder="Product">
      </td>
      <td id="col1">
        <input class="form-control quantity" type="number" placeholder="Quantity" id="" onblur="total_amount(this)">
      </td>
      <td id="col2">
        <input class="form-control unit" type="number" placeholder="Price Unit" id="" onblur="total_amount(this)">
      </td>
      <td id="col3">
        <input class="form-control amount" type="number" placeholder="Amount" id="" readonly>
      </td>
      <td id="col4">
        <button class="btn btn-danger btn-sm" aria-label="Delete" id="delete" onclick="delete_item()">
          <i class="fas fa-trash"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>

赞(0）回复(0）举报 2023-05-21

o8x7eapl3#

早上好。
首先，在你的HTML代码中，你只有一个tr，如果你的应用程序可以有多个td（我认为在大多数情况下），你必须创建一个类，而不是一个id，可以在元素中迭代（为多个元素使用一个id，这是一个不好的做法）。
在这种情况下，我认为你必须检测两个输入的变化，验证输入，最后进行计算。
我给你举个例子：https://jsfiddle.net/wngshzrv/23/

<table class="table table-striped" id="line_item" data-togle="table" data-sort-stable="true">
              <thead>
                <tr>
                  <th>
                    Product
                  </th>
                  <th>
                    Quantity
                  </th>
                  <th>
                    Price Unit
                  </th>
                  <th>
                    Amount
                  </th>
              
                </tr>
              </thead>
              <tbody>
                <tr class="product">
                  <td class="col0">
                    <input class="form-control" type="text" placeholder="Product" >
                  </td>
                  <td class="col1">
                    <input class="form-control quantity" type="number" placeholder="Quantity"  >
                  </td>
                  <td class="col2">
                    <input class="form-control unit" type="number" placeholder="Price Unit"  >
                  </td>
                  <td class="col3">
                    <input class="form-control amount" type="number" placeholder="Amount"  readonly>
                  </td>
                  <td class="col4">
                  <button class="btn btn-danger btn-sm" aria-label="Delete" id="delete" onclick="delete_item()">
                    <i class="fas fa-trash"></i>
                  </button>
                  </td>
                
                </tr>          
                <tr class="product">
                  <td class="col0">
                    <input class="form-control" type="text" placeholder="Product" >
                  </td>
                  <td class="col1">
                    <input class="form-control quantity" type="number" placeholder="Quantity">
                  </td>
                  <td class="col2">
                    <input class="form-control unit" type="number" placeholder="Price Unit"  >
                  </td>
                  <td class="col3">
                    <input class="form-control amount" type="number" placeholder="Amount"  readonly>
                  </td>
                  <td class="col4">
                  <button class="btn btn-danger btn-sm" aria-label="Delete" id="delete" onclick="delete_item()">
                    <i class="fas fa-trash"></i>
                  </button>
                  </td>
                
                </tr>    
              </tbody>
            </table>
<script>
var products = document.querySelectorAll(".product")

products.forEach(x=>{
var quantity = x.querySelector(".col1 .quantity")
var priceUnit = x.querySelector(".col2 .unit")
var amount = x.querySelector(".col3 .amount")
priceUnit.addEventListener('blur',()=>{
    amount.value = quantity.value*priceUnit.value
})

})
</script>

你只需要验证数字。
我希望这能帮助你。

赞(0）回复(0）举报 2023-05-21

wvt8vs2t4#

使用此功能

function total_amount(){
  var table = document.getElementById('line_item');
  let qty = document.getElementById('quantity').value;
  let unit = document.getElementById('unit').value;
  var cellCount = table.rows[0].cells.length;
  total =0
  for(var i=0;i<table.rows.length;i++){
    if (qty[i] && unit[i] && !isNaN(Number(qty[i])) && !isNaN(Number(unit[i])) ){
      let total = Number(qty[i]) * Number(unit[i]);
      document.getElementById('amount').value = total; 
    }
  }
}

赞(0）回复(0）举报 2023-05-21

我来回答

JavaScript中求和循环价格和数量输入行

4条答案

相关问题

热门标签

最新问答