Question

我想总计所有行的总价。但它无法添加它只是连接值的值。这是生成HTML的PHP：

$counter = 0;

foreach($db->getRecordSet($sqlTrRecord) as $row){$counter += 1; ?>
    <tr id="temTr" class="banktblhd">
      <td width="5"> <?php echo($counter); ?> </td>


      <td class="w10"> <input type="number" name="item_code" id="item_code" class="form-control" value="<?php echo($row['item_code']); ?>" readonly  /></td>
      <td class="w10"><input type="text" class="form-control" name="item_name" id="item_name" value="<?php echo($row['item_name']); ?>" readonly /> </td>
      <td class="w10"><input type="text" class="form-control" name="description" id="description" value="<?php echo($row['description']); ?>" readonly /></td>
      <td class="w10"><input type="number" class="form-control" name="availableQty" id="availableQty" value="<?php echo($row['quantity']); ?>" readonly  /></td>
      <td class="w10"><input type="number" class="form-control" name="p_cost" oninput="total(this);" id="p_cost" value="<?php echo($row['p_cost']); ?>" readonly /></td>
      <td class="w10">
        <input type="number" oninput="total(this);" class="form-control" name="quantity" id="quantity" autocomplete="off" /> </td>
      <td class="w10">
        <input type="number" oninput="total(this);" class="form-control" name="sale" id="sale" autocomplete="off" /> </td> 
      <td class="w10"><input type="number" oninput="total(this)" class="form-control" name="total_price" id="total_price" readonly />
      </td>
      <td class="w10" colspan="2"><input type="number" class="form-control"  name="total" id="total" readonly /></td>

这是我的JavaScript：

function total(element) {
    var row = element.closest("tr");
    var unitRate = row.querySelector("input[name=p_cost]");
    var qty = row.querySelector("input[name=quantity]");
    var sale = row.querySelector("input[name=sale]");

    var total_price = parseFloat(unitRate.value * qty.value) + parseFloat(sale.value);
    var total = row.querySelector("input[name=total_price]").value = total_price;

    document.getElementById("total").value += total;
}

Answer 1

首先你需要得到一个数字。将parseInt()应用于表单中的输入值，然后添加值。这肯定会对你有用。

Answer 2

您可以使用document.getElementById("total").valueAsNumber，因为document.getElementById("total").value会将您作为字符串

Answer 3

在你的代码中，你去了

document.getElementById("total").value += total;

与

相同

document.getElementById("total").value = document.getElementById("total").value + total;

现在document.getElementById("total").value是一个文本值，所以第一个操作数是文本，第二个操作数转换为文本，这就是你得到连接的原因（在控制台中尝试"2"+2和var a = "2"; a+=2）。所以你可以去

document.getElementById("total").value = parseFloat(document.getElementById("total").value) + total;

但实际上我觉得你需要

document.getElementById("total").value = parseFloat(document.getElementById("total").value) + total_price;

并且根本不需要创建另一个var（total）（为什么需要它？）

事实上，我认为你需要（而不是total函数的最后3行[man，它应该是getTotal，不要命名那样的函数！]）：

var total_price = parseFloat(unitRate.value * qty.value) + parseFloat(sale.value);
row.querySelector("input[name=total_price]").value = total_price;
var prevTotal = parseFloat(document.getElementById("total").value);
document.getElementById("total").value = prevTotal + total_price;

实际上这似乎也不是一个好主意：目前你的total函数在输入时被调用，所以当一个类型1时，1会被添加到你的总数中，当你继续输入并输入时将添加10，10 更多，为您提供11。如果他们更改了值，您的处理程序将添加新值保留以前的值。您必须每次重新计算总数！

JavaScript - 需要总输入中所有行的总价格总和，但它将值连接在一起而不是添加它们

3 个答案: