Javascript小计函数仅适用于表格的第一行

标签 javascript php html

我正在实现一个购物车,并且添加了 subtotal将商品数量与价格相乘并返回 subtotal 中的小计的字段专栏。

但是,我的 JavaScript 函数仅计算第一行的小计,而不是所有行的小计。

代码如下:

<td style="text-align: left; width: 80px;">PKR<input style="width: 70px;" type="number" id="price1" value="<?php echo $values["item_price"];?>" readonly ></td>
<td style="text-align: center; width: 80px;"><br/><input style="width: 60px; " form="myform" type="number"  name="qty[<?php echo $values["item_id"]; ?>]" id="qty" value="<?php echo $values["item_quantity"];?>"></td>
<td style="text-align: left; width: 80px;">PKR<input style="width: 70px; " form="myform" type="number" id="total" value="" readonly></td>

<script type="text/javascript">
  var price1=document.getElementById("price1").value;

  function calculate1() {    
    var quantity1 = document.getElementById("qty").value;
    var x = price1 * quantity1;
    document.getElementById("total").value = x;        
  }
</script> 

注意:我正在调用 calculate() onload 上的函数事件<body>标签。

最佳答案

如果您的所有字段都是只读 - 然后使用 php 设置总值并删除您的 javascript 函数:

<input 
    style="width: 70px; " 
    type="number" 
    value="<?php echo ($values["item_quantity"] * $values["item_price"]) ?>" 
    readonly>

关于Javascript小计函数仅适用于表格的第一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45368868/

相关文章:

javascript - 隐藏类中的第二个元素

javascript - 在 ng-repeat block 中无限调用函数

php - 正则表达式匹配字符串 BAR,只要它之前没有出现字符串 FOO

javascript - 更新 HTML 对象数据

javascript - 如何用jquery改变option的值

javascript - 如果单击已选中的列表项,则会阻止取消选中

php - 循环随机字符串

php - 检查 haystack 字符串中是否存在数组中的任何值

html - 网站站点在 Dreamweaver 中看起来不错,但是

javascript - 获取应用于元素的 css 类的背景颜色