只有第一行中的按钮使用 javascript 在 html 表中工作

Question

I have an add button in a table for every row, which when clicked should print the price in the price column by multiplying the quantity entered by the user with the price of the product.我在表中的每一行都有一个添加按钮，单击该按钮时应该通过将用户输入的数量乘以产品价格来在价格列中打印价格。 But it is only working for the 1st row.但它只适用于第一行。 How do I make it work?我如何让它发挥作用？

<div class="container">
<div class="row">
    <div class="bg-white">
        <form method="POST">
            <table class="table table-responsive" id="myTable">
                <tr>
                    <th class="text-center">Item</th>
                    <th class="text-center">Qty</th>
                    <th></th>
                    <th class="text-center">Price</th>
                    <th class="text-center"></th>
                </tr>

                <body>
                    <?php 
                        $i = 1;
                        foreach($_SESSION['cart'] as $name => $array){ 
                            $price = "select item_name, Item_price from item where item_name='$array'";
                            $result = mysqli_query($conn, $price);
                                while($rows = mysqli_fetch_array($result)){
                                    $name = $rows['item_name']; 
                                    $pr = $rows['Item_price'];
                    ?>

                <tr>
                    <td class="text-center"><?php echo $name;?></td>
                    <td><input class="form-control" type="text" id="qty" style="width: 40px" name="ss"></td>
                    <td><button type="button" class="btn btn-success" onclick="values()">add</button></td>

                    <script type="text/javascript">
                        function values() {
                            var n1, n2, final;

                            n1 = parseFloat(document.getElementById('qty').value);
                            n2 = parseFloat(<?php echo $pr ?>);
                            final = n1*n2;
                            alert(final);
                            document.getElementById('qty').value = n1;
                            document.getElementById('val') = final;
                        }
                                          </script>

                    <td id="val"></td>
                    <td><button type="button" name="remove" class="btn btn-    danger btn_remove">X</button></td>
                </tr>
                                     <?php 
                        }
                    $i++;
                        } 
                    ?>

                </body>
            </table>
        </form>
    </div>
</div>

Answer 1

You should first and foremost use prepared statements as mentioned in the comments.您应该首先使用注释中提到的准备好的语句。 Make it a habit.养成习惯。 Do it every time.每次都这样做。 It is important.这很重要。 And correct the tag issue.并纠正标签问题。

You need to know that the function values is re-defined at every iteration of the loop, so all calculations are using the price of the last item.您需要知道函数values在循环的每次迭代中都会重新定义，因此所有计算都使用最后一项的价格。 You should define the function exactly once.您应该只定义一次函数。 You should consider changing it to accept arguments, eg price and name.您应该考虑更改它以接受参数，例如价格和名称。 It will become clear why as you read on.当您继续阅读时，原因就会变得很清楚。

You could make the id's unique for each qty and val by adding the "name".您可以通过添加“名称”使每个qty和val的 id 唯一。 Instead of代替
<input class="form-control" type="text" id="qty"...
try something like尝试类似的东西
<input class="form-control" type="text" id="<?php echo $name.'_qty'; ?>"... . <input class="form-control" type="text" id="<?php echo $name.'_qty'; ?>"...

And something similar for the val id.和val id 类似的东西。

Now, have the onclick take arguments, so instead of onclick="values()" when the button is created, something like onclick="values(<?php echo '\''.$name.'\','.$pr; ?>)" [all the ticks and \ are to quote the name, maybe there's a better way.].现在，让 onclick 接受参数，所以在创建按钮时不要使用onclick="values()" ，而是使用onclick="values(<?php echo '\''.$name.'\','.$pr; ?>)" [所有的刻度线和 \ 都是引用名称，也许有更好的方法。]。

The (one) values function can take the two arguments ( function values(name,price) { ), and it can "construct" the ids something like this (one) values函数可以接受两个参数 ( function values(name,price) { )，它可以像这样“构造”ids
n1 = parseFloat(document.getElementById(name + '_qty').value);

The code I've supplied is sample only and not guaranteed syntax error free.我提供的代码只是示例，不能保证没有语法错误。 You have a lot of typing and testing and retyping and retesting ahead of you.你前面有很多打字、测试、重新打字和重新测试。 Slow and steady......缓慢而稳定……

只有第一行中的按钮使用 javascript 在 html 表中工作

问题描述

1 个解决方案

解决方案1
0 2020-01-22 00:16:57

只有第一行中的按钮使用 javascript 在 html 表中工作

问题描述

1 个解决方案

解决方案1 0 2020-01-22 00:16:57

解决方案1
0 2020-01-22 00:16:57