JavaScript/PHP : Dynamically updating a field given two inputs in a table row

Question

我正在为我正在进行的一个小项目创建一个动态利润率计算器。

简介

1. 使用 SQL 和 PHP 从数据库表中提取一组数据
2. 经过一些健全性检查后，数据将作为标准 HTML 表格中的行动态迭代
3. 在迭代过程中，我们输出一些单元格(特别是“生产成本”和“销售价格”)作为输入，以便用户可以动态更改周围的数字并查看不同的利润
4. 每行的最后一个单元格是根据前两个输入字段中的值计算得出的边距百分比

以下过程的伪代码请参见代码片段 1

问题

我遇到的问题是我尝试使用 JS 对两个输入使用 onChange() 方法动态更新边距字段。这个想法是，如果用户更新两个字段之一，则读取值并更新边距字段。

尝试解决方案

1. 我尝试以数组语法输出 ids，看看这些值是否会存储在像 costOfProduction[] 这样的数组中。据我所知，这适用于 PHP 语法，但不适用于 JS
2. 我尝试编写一个 JavaScript 函数，例如 updateTable(productCost, salesCost, marginID) ，该函数将被称为 onChange() 并传递值。唯一的问题是我无法找到一种方法将相邻单元格中的值提取到原始单元格的 onChange() 调用中。
3. 在 SO 论坛中搜索类似的修复程序。我见过的所有解决方案都使用静态单个输入和提交按钮，但我需要更动态的东西来对动态输出的各个输入进行更改。

代码片段

代码片段 1:表格元素的输出

    <table class="table table-hover table-responsive" id="marginTable">
        <thead>
          <tr>
            <th>product Name</th>
            <th>Sale Price</th>
            <th>production Cost</th>
            <th>Margin</th>
          </tr>
        </thead>

        <tbody>

            <?php 

                try {

                      /* connect to the database and get the data */

                        while (hasData){

                            echo 
                            '<tr>
                                <td>'.$dishName.'</td>
                                <td>
                                    <div class="input-group">
                                        <span class="input-group-addon">$</span>
                                        <input class="form-control" type="number" step="0.01" name="itemPrices[]" id="itemPrices" value="'($itemPrice).'" onchange="updateTable()">
                                    </div>
                                </td>
                                <td>
                                    <div class="input-group">
                                        <span class="input-group-addon">$</span>
                                        <input class="form-control" type="number" step="0.01" name="productionCost[]" id="productionCost" value="0.00" onchange="updateTable()">
                                    </div>
                                </td>
                                <td id="margins"><strong>0.00%</strong></td>
                            </tr>';

                          }

                        }

                    }

                } 

                echo '<script type="text/javascript">

                   function updateTable(){
                      /* javascript goes here */

                   }
                </script>';

            ?>

        </tbody>

    </table>

TL;DR

我需要一种使用 JS 的方法，如果更新表中的两个输入之一，则根据输入的内容计算并更新同一行上的单元格。

非常感谢大家的时间和帮助!

Answer 1

做起来更简单。删除 id 和 onchange 处理程序。在您的情况下，类处理起来要简单得多。将类别添加到您的价格和成本输入字段，如下所示。

<input class="form-control price" type="number" step="0.01" name="itemPrices[]" > // add class price

<input class="form-control cost" type="number" step="0.01" name="productionCost[]"> // add class cost

在您将显示边距的最后一个表格数据中，添加一个边距类，如下所示

<td class="margin"><strong>0.00%</strong></td>

然后使用jquery你可以得到你的结果

$(document).ready(function(){
$('table tbody').on('change','tr', function(){

    var price = $(this).find('input.price').val();
    var cost =  $(this).find('input.cost').val();
    var margin = price * cost; // test calculation

    $(this).find('td.margin').html("<strong>"+margin+"%</strong>");
});
});

请注意，此解决方案需要jquery 库

希望这有帮助