Javascript 如何为每个表行循环相同的功能？

我想根据货物价格计算总价。它适用于第一排。但是如果有多行，它就不起作用。如何为表中的每一行循环相同的功能？有人能帮我吗

函数calcCargo（）{
var price=parseFloat（document.querySelector（'.price'）.value）；
var total=document.querySelector（'.total'）；
var cargo=document.querySelector（“.cargo”）；
var totalCargoAndPrice=价格+浮动（cargo.value）；
total.value=货物和价格总额；
控制台日志（总货物和价格）；
}

价格
量
货价
全部的

这不起作用，因为

document.querySelector（

获取找到的第一个元素。（解释为什么它对第一行起作用！）

JS HTML

价格
量
货价
全部的

这不起作用，因为

document.querySelector（

获取找到的第一个元素。（解释为什么它对第一行起作用！）

JS HTML

价格
量
货价
全部的

试着这样做：

函数calcCargo（e）{
var row=e.target.parentElement.parentElement；
var price=parseFloat（row.querySelector（'.price'）.value）；
var total=行.querySelector（'.total'）；
var cargo=行查询选择器（“.cargo”）；
var totalCargoAndPrice=价格+浮动（cargo.value）；
total.value=货物和价格总额；
控制台日志（总货物和价格）；
}

价格
量
货价
全部的

试着这样做：

函数calcCargo（e）{
var row=e.target.parentElement.parentElement；
var price=parseFloat（row.querySelector（'.price'）.value）；
var total=行.querySelector（'.total'）；
var cargo=行查询选择器（“.cargo”）；
var totalCargoAndPrice=价格+浮动（cargo.value）；
total.value=货物和价格总额；
控制台日志（总货物和价格）；
}

价格
量
货价
全部的

我也尝试了querySelectorAll。它没有帮助我也尝试了querySelectorAll。它没有帮助，也感谢您的解释。它有意义。我很高兴它有帮助：）它有帮助，也感谢您的解释。它有意义。我很高兴它有帮助：）

function calcCargo(target){
  const row = target.closest("tr");
  var price = parseFloat(row.querySelector('.price').value);
  var total = row.querySelector('.total');
  var cargo = row.querySelector(".cargo");
  var totalCargoAndPrice = price + parseFloat(cargo.value);
  total.value = totalCargoAndPrice;
}

<div class="row">
  <table class="table" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th class="font-weight-bold text-success">Price</th>
        <th class="font-weight-bold text-success">Quantity</th>
        <th class="font-weight-bold text-success">Cargo Price</th>
        <th class="font-weight-bold text-success">Total</th>
      </tr>
    </thead>
    <tbody id="products">
      <tr>
        <td>
          <input type="number" class="form-control price" value="15" name="price[]" />
        </td>
        <td>
          <input type="number" class="form-control" value="1" />
        </td>
        <td>
          <input type="number" class="form-control cargo" value="0" onchange="calcCargo(this)" />
        </td>
        <td>
          <input type="number" class="form-control total" disabled="disabled" id="t-{{ $item->id }}" placeholder="0" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="number" class="form-control price" value="15" name="price[]" />
        </td>
        <td>
          <input type="number" class="form-control" value="1" />
        </td>
        <td>
          <input type="number" class="form-control cargo" value="0" onchange="calcCargo(this)" />
        </td>
        <td>
          <input type="number" class="form-control total" disabled="disabled" id="t-{{ $item->id }}" placeholder="0" />
        </td>
      </tr>
    </tbody>
  </table>
</div>

// You can do it multiple wasys, but here is one of them

// first you need to collect every table-cell that contains the vaklue you need to summarize.
const cargoItems = document.querySelectorAll('td .cargo')
// this is the way you get all values and now you need just iterate over this input nodes and get the values. And the most elegant way to do that - use Array.prototypre.reduce.call()

// it may looks quizzically, but html nodes collection has no personal reduce method, that can helps us to itertate over the data. Let's do it

// in this case every htmlNode becomes an rec - receiver, and variable that will accumulate all values is a 'acc'. 0 set as default value, that increments untill your cargo inputs ends
const summ = Array.prototypre.reduce.call(cargoItems, (acc, rec) => {
  return acc + parseFloat(rec.value)
}, 0)

// show result
console.log(summ)