使用PHP和数组进行实时计算

作者: 啊这回彻底死了
发布时间: 2024-12-20 07:24:09 (12天前)
转自：

3 条回复

0#
回复此人
ikun | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您想要的是在jsfiddle的以下更新中用纯js编写的： <a href="https://jsfiddle.net/cwfmqbqv/5/" rel="nofollow"> 的jsfiddle </A> </p> <P> 这里的主要概念是使用 <code> change </code> 关于投入的事件。此外，我没有更改输入的命名，但考虑更好的约定。 </p> <P> 在里面 <code> total </code> 函数，我们得到一种我们正在处理的列（使用自定义属性比仅使用输入名称更好。例如： <code> column-type="thc" </code> ）并计算每个相关输入的总数。它使用正则表达式（ <code> RegExp </code> ）在您的情况下，从输入名称中找到正确的列。记住这一点 <code> ~~ </code> 只是在JavaScript中进行文本到整数转换的简单方法。 </p> <P> 接下来，我们找到所有输入并使用附加事件监听器 <code> addEventListener </code> 为每个人 <code> change </code> 事件类型。在这个代表中，我们找到了适当的输入 <code> total </code> 函数和跨度ID对应于输入所代表的列，再次使用 <code> RegExp </code> 但这一次含蓄地说。然后根据更改相应的跨度 <code> total </code> 回报值; </p> </DIV>

编辑
1#
回复此人
枫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这与第一个答案类似，但更完整，并且附加功能会在keyup上触发而不是模糊。它适用于所有列，无需为每个列创建单独的函数。 <a href="https://jsfiddle.net/24wt6c23/2/" rel="nofollow"> 这是小提琴。 </A> </p> <P> 的<strong> 使用Javascript </强> </p> <pre> <code> $(function(){ $(".ocean-input, .bunker-input, .thc-input, .road-input").on("keyup", function() { var total = 0; $("." + $(this).attr('class')).each(function() { total += parseFloat($(this).val().replace('', 0).replace(',', '.')); }); $("#" + $(this).data("total-id")).html(total.toString().replace('.', ',')); }); }); </code> </pre> <P> 的<strong> HTML </强> </p> <pre> <code> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial, sans-serif; color:#000; font-size:12px;"> <thead> <tr> <th width="50">Amount</th> <th>Type</th> <th>Weight (p/u)</th> <th>Shipping owned</th> <th>Ocean Freight</th> <th>Bunker Surcharge</th> <th>THC</th> <th>Road transport</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Container Type 1</td> <td>1000</td> <td>No</td> <td>€ <input type="text" class="ocean-input" data-total-id="ocean-total" name="msg_container[0][ocean_freight]" value="" style="width: 100px;"></td> <td>€ <input type="text" class="bunker-input" data-total-id="bunker-total" name="msg_container[0][bunker_surcharge]" value="" style="width: 100px;"></td> <td>€ <input type="text" class="thc-input" data-total-id="thc-total" name="msg_container[0][thc]" value="" style="width: 100px;"></td> <td>€ <input type="text" class="road-input" data-total-id="road-total" name="msg_container[0][road_transport]" value="" style="width: 100px;"></td> </tr><tr> <td>1</td> <td>Container Type 2</td> <td>2500</td> <td>No</td> <td>€ <input type="text" class="ocean-input" data-total-id="ocean-total" name="msg_container[1][ocean_freight]" value="" style="width: 100px;"></td> <td>€ <input type="text" class="bunker-input" data-total-id="bunker-total" name="msg_container[1][bunker_surcharge]" value="" style="width: 100px;"></td> <td>€ <input type="text" class="thc-input" data-total-id="thc-total" name="msg_container[1][thc]" value="" style="width: 100px;"></td> <td>€ <input type="text" class="road-input" data-total-id="road-total" name="msg_container[1][road_transport]" value="" style="width: 100px;"></td> </tr> </tbody> <tfoot> <tr> <th width="50"></th> <th></th> <th></th> <th></th> <th>Total: €<span id="ocean-total"></span></th> <th>Total: €<span id="bunker-total"></span></th> <th>Total: €<span id="thc-total"></span></th> <th>Total: €<span id="road-total"></span></th> </tr> </tfoot> </table> </code> </pre> </DIV>

编辑

登录后才能参与评论