Javascript 动态更改html表中的值

我有一个html表，我在其中使用PHP从数据库检索数据。这个表很简单，我有三个字段：

Name

、

Quantity

和

Price

。在表的末尾，我有一个附加字段，

Subtot

，它显示了最终成本

（总资产（数量*价格））

我需要能够更改每行中的“数量”值，“

小计

”应相应更新。我还需要能够设置用户可以用来更新单元格的最小/最大值

我想在每一行中通过“

Quantity

”值添加一个按钮或任何类型的列表/输入

我想我需要使用javascript，但我不确定，欢迎任何建议。 遵循我的代码

谢谢

<table>
<tbody>
  <tr>
    <th>Name</th>
    <th>Quantity</th>
    <th>Price<th>
 </tr>
<?php
while($row2 = $result->fetch_assoc())
{?>
    <tr>
      <td><?php echo $row2["Name"] ?></td>
      <td><?php echo $row2["Quantity"] ?></td>
      <td><?php echo $row2["Price"]?></td>
    </tr>
<?php
  $subtot = $subtot + ($row2["Price"] * $row2["Quantity"])
 } ?>
<td></td>
<td><b>Subtot.</b></td>
<td><b><?php echo $subtot2 ." Euro"; $tot = $subtot1 + $subtot2;?> </b></td>
</tbody>
</table>

名称
量
价格
小计。

以下方法应该有效，但是我不建议在服务器端没有任何验证的情况下使用这种方法（顺便说一句，任何方法）

您需要在php文件上添加以下内容：

<?php
    $total = 0;

小计。

您需要以下脚本标记：

<script>
    function myFunction(){
        var total = 0;
        var elements = document.getElementsByClassName("row");
        for(var i = 0; i < elements.length; i++) {
            total += elements[i].value * elements[i].dataset.price;
        }

        var totalEl = document.getElementById("total");
        totalEl.innerHTML = total;
    }
</script>

函数myFunction（）{
var合计=0；
var elements=document.getElementsByClassName（“行”）；
对于（var i=0；i

---

再一次。。这是一个非常简单的解决方案，但它应该可以工作。

您可以使用jQuery或javascript。但是为了更高效。为了对您的Web应用程序进行任何客户端更改，您需要javascript yes。查找如何以DOM元素为目标、读取其值或将新值放入其中。让我们知道你尝试了什么，如果你仍然挣扎，我们将很乐意帮助你：）谢谢。两个问题。“服务器端验证”是什么意思？这样，您只需更改屏幕上的值，或者数据库中的值也会得到更新？它只会在屏幕上更新。您需要将这些值发布到后端控制器。这就是进行验证的地方。您需要检查这些值是否有效，以及用户是否试图造成任何伤害。“永远不要相信你的用户”。验证用户输入后，您可以更新DBCode，因为DBCode实际上不起作用。每当我尝试更改一个值时，我都会得到一个total=NaN。也许您需要将价格和数量解析为整数/浮点。可以这样做：

parseFloat（元素[i].value）*parseFloat（元素[i].dataset.price）

或对整数使用

parseInt（）

。我用

onclick=myfunction（）

代替了

onchange=myfunction（）

<script>
    function myFunction(){
        var total = 0;
        var elements = document.getElementsByClassName("row");
        for(var i = 0; i < elements.length; i++) {
            total += elements[i].value * elements[i].dataset.price;
        }

        var totalEl = document.getElementById("total");
        totalEl.innerHTML = total;
    }
</script>