Question

我需要帮助，基本上将总和输入加在一起，使它们相加以创建最终数量。

正如你在上面的图片中看到的那样，可以有多个输入，并且该人可以通过点击按钮添加更多，代码工作，所以数量和单价加在一起，但是我在小计后自动添加以保持更新gbp总数。

<table>
  <tr>
    <td>
      <input type="number" oninput="calculate(this)" id="qid1" data-quantity name="qamount" min="0" data-validation="number" class="qinput txt" value="{{Quantity}}" />
    </td>
    <td>
      <input type="text" data-validation="length" data-validation-length="max100" class="dinput" value="{{Details}}" />
    </td>
    <td>
      <input type="number" oninput="calculate(this)" id="uid1" data-unitprice name="uamount" min="0" data-validation="number" data-validation-allowing="float" class="uinput txt" value="{{UnitPrice}}" />
    </td>
    <td>
      <input readonly id="subsubtotal" name="totalamount" class="sinput txt" value="{{Subtotal}}" />
    </td>
  </tr>
</table>

<div class="additembtton">
  <button id="bttonitem">Add Invoice Item</button>
  <input id="bttonitem1" type="submit" value="Save" />
  <span class="gbptotal">GBP Total</span>
  <span id="totalplus" class="totalsub">£0.00</span>
</div>

JS

//code that multiplies the quantity and unit price input boxes
function calculate(obj) {
    var tr = obj.parentNode.parentNode;
    var myBox1 = tr.cells[0].children[0].value;
    var myBox2 = tr.cells[2].children[0].value;
    var result = tr.cells[3].children[0];
    var myResult = parseFloat(myBox1) * parseFloat(myBox2);
    result.value = myResult.toFixed(2);
}

上面的javascript是已经有效的，这将数量和单价一起乘以，我正在努力与我对子总数的相同方式，将所有子总数加在一起（不过可能有很多），并显示0.00英镑的最终总数。

Answer 1

<input id="bttonitem1" type="submit" value="Save" onclick="gbpTotal()">

function gbpTotal(){

    var total = 0;

    var inputs = document.querySelectorAll('.sinput');

    inputs.forEach(function(e){

        total += parseFloat(e.value);

    });

    document.querySelector('#totalplus').textContent = total;

};

您可能希望在他们单击输入而不是保存

时触发该功能

Answer 2

当需要对它们进行总计时，您需要查询来自同一列的所有输入。最好通过确保每列中的输入属于同一CSS类来实现。这样，无论你走多少行都没关系，你不必担心行或单元格，只需要属于同一类的输入。

因此，这是一个示例，显示如何获取总列的总数，但同样的方法将用于任何其他列。

var totals = document.querySelectorAll(".total");
var output = document.getElementById("total");
var btn = document.querySelector("button");

btn.addEventListener("click", function(){
  
  var tot = null;
  // Convert the node list of inputs that hold totals into an array and loop through that array
  Array.prototype.slice.call(totals).forEach(function(element){
    // Get the sum of the values
    tot += parseFloat(element.value);
  });
  
  // Display the output
  output.textContent = tot;

});

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Price</th>
      <th>Quantity</th>  
      <th>Total</th>    
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="name"></td>
      <td><input type="text" class="price"></td>
      <td><input type="text" class="qty"></td>  
      <td><input type="text" class="total"></td>    
    </tr>  
    <tr>
      <td><input type="text" class="name"></td>
      <td><input type="text" class="price"></td>
      <td><input type="text" class="qty"></td>  
      <td><input type="text" class="total"></td>    
    </tr>  
    <tr>
      <td><input type="text" class="name"></td>
      <td><input type="text" class="price"></td>
      <td><input type="text" class="qty"></td>  
      <td><input type="text" class="total"></td>    
    </tr>      
  </tbody>
</table>
<div id="total"></div>
<button>Get Totals</button>

我需要将多个输入加在一起，这两个输入只读取其他两个输入

2 个答案: