Question

当页面加载循环开始并且java脚本函数也在循环的第一行中起作用但是在第二循环中它不起作用乘法不起作用你可以在pic中看到（单位费率*数量=总价格）

                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="text" name="item_code" id="item_code" class="form-control" value="<?php echo($row['item_code']); ?>" readonly  /></td>
          <td class="w20"><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="text" class="form-control" name="availableQty" id="availableQty" value="<?php echo($row['quantity']); ?>" readonly  /></td>
          <td class="w10"><input type="text" class="form-control" name="unit_rate" id="unit_rate" onKeyUp="total()" value="<?php echo($row['unit_rate']); ?>" readonly /></td>
          <td class="w10">
          <input type="number" class="form-control" name="quantity" id="quantity" onKeyUp="total()" autocomplete="off" /> </td>

          <td class="w10"><input type="text" class="form-control" name="total_price" id="total_price" value="" />
          </td>
</tr>
--------------------------

function total(){
    var unitRate= document.getElementById("unit_rate");
    var qty = document.getElementById("quantity");

    var total = unitRate.value * qty.value;

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

Answer 1

您不能为多个元素提供相同的ID。这是无效的HTML。如果你这样做，getElementById通常会返回第一个（但它可以做任何事情，包括不返回任何内容，因为它再次无效）。

在您的情况下，完成此项工作所需的最小更改是：

删除行中的所有id，您不需要它们。将name保留在input s。

将this传递给您total的任何地方，以便它知道keyup发生在哪个元素上，例如：

<input type="number" class="form-control" name="quantity" onKeyUp="total(this)" autocomplete="off" />
<!-- --------------------------------------------------------------------^^^^       -->

更新total以将其作为参数接收，并通过遍历DOM查找同一行中的各种输入：

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

    // (Note you're relying on implicit coercion from string to number here)
    var total = unitRate.value * qty.value;

    row.querySelector("input[name=total_price]").value = total;
}

通过查找包含事件发生的元素的行，然后使用带有CSS选择器的Element#querySelector来查找那行中的各种input s 。 / p>

请注意，它使用Element#closest，这是相当新的。为避免使用它，您可以替换

var row = element.closest("tr");

与

var row = element; while (row && row.tagName !== "TR") { row = row.parentNode; }

几个旁注：

keyup不是用于更新总字段的可靠事件，因为如果用户通过鼠标更新字段，则不会触发（例如，右键单击并从上下文中选择粘贴）菜单）。我建议使用input事件。

使用onxyz - 属性样式事件处理程序不是最佳实践，尤其是因为它们只能调用全局函数（或元素上的方法，包含表单，如果有的话等）。相反，您可以使用在表上注册的事件处理程序，并使用事件对象的target来了解事件所针对的元素（以及因此要处理的行）。这是可能的，因为input和keyup都会冒泡。

Java脚本功能在第二个循环中不起作用

1 个答案: