如何在另一列上显示html表格的计算

Posted 2023-03-14

【中文标题】如何在另一列上显示html表格的计算

【英文标题】：How to display calculation of html table on another column

【发布时间】：2020-02-19 05:01:20

【问题描述】：

我有3列，一列total_column_price用来显示amount和device_price的计算结果。如何实现？

表格

 Form::open(['action' => 'TransactionsINController@store', 'method' => 'POST']) 

<table class="table table-hover table-bordered">
    <thead align="center">
        <tr>
            <th>Amount</th>
            <th>Device Price</th>
            <th><a href="#" class="btn btn-primary btn-sm addRow">
                    <i class="fa fa-plus"></i>
                </a>
            </th>
            <th>Column Total Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="form-group">
                     Form::number('amount[]', 'value', ['name' => 'amount[]']) 
                </div>
            </td>
            <td>
                <div class="form-group">
                     Form::number('device_price[]', 'value', ['name' => 'device_price[]']) 
                </div>
            </td>
            <td align="center">
                <a href="#" class="btn btn-danger btn-sm remove">
                    <i class="fa fa-times"></i>
                </a>
            </td>
            <td>
                 Form::text('total_column_price', '') 
            </td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>Total: </td>
            <td style="border: none"><b class="total_price"></b></td>
            <td style="border: none"></td>
        </tr>
    </tfoot>
</table>

 Form::button('<i class="far fa-save"></i> Submit', ['type' => 'submit', 'class' => 'btn btn-info'] )  
 Form::close() 

这是我尝试使用的计算方法。目的是当我在amount 和device_price 列中输入时，结果将自动出现在total_column_price 中。

计算脚本

<script type="text/javascript">
        $('tbody').delegate('.amount,.device_price','keyup',function()
            var tr=$(this).parent().parent();
            var amount=tr.find('.amount').val();
            var device_price=tr.find('.device_price').val();
            var total_column_price=(amount*device_price);
            tr.find(.total_column_price).val(total_column_price);
            total_price();
        );
        function total_price()
            var total_price=0;
            $('.total_column_price').each(function(i,e)
                var total_column_price=$(this).val()-0;
            total_price +=total_column_price;
        );
            $('.total_price').html(total_price+",00");
        
</script>

【问题讨论】：

我不能 100% 确定您的表单字段在您的 sn-p 中没有显示为 html，但我认为您将它们称为一个类而不是它们的输入字段名称。尝试引用这样的值而不是 $('input[name="amount"]')。其次，数量和设备价格字段似乎被指定为一个数组，但您将它们视为一个单数。尝试从那里开始。

@RyanN。是的，这是一个动态表，我可以在其中添加/删除行。我真的不明白你指的是什么，因为我是 web 和 laravel 的新手。我添加了表单，请再次查看。

【参考方案1】：

您的代码中的一切似乎都很好，问题是您使用 JQuery 查找功能的方式，您需要在输入选择器时添加引号。

 tr.find('.total_column_price').val(total_column_price);

使用新的事件句柄 .on() .on() 语法是 1.7 版使用的新语法，旨在替代 .bind()、.delegate() 和 .live()。

您的 javascript 中的另一个问题与从输入框中的 keyup 获取父级有关。 应该是这样的

var tr = $(this).parent().parent().parent();

试试下面的代码：

 $(function() 

  $(document).on('keyup', 'input[name="amount[]"],input[name="device_price[]"]', function() 
    var tr = $(this).parent().parent().parent();
    var amount = tr.find('input[name="amount[]"]').val();
    var device_price = tr.find('input[name="device_price[]"]').val();
    var total_column_price = (amount * device_price);
    total_price();
  );

  function total_price() 
    var total_price = 0;
    $('input[name="total_column_price[]"]').each(function(i, e) 
      var total_column_price = $(this).val() - 0;
      total_price += total_column_price;
    );
    $('.total_price').html(total_price + ",00");
  


)

【讨论】：

使用 $(document) 检查上面的代码更改是否完成，这将绑定完整页面和动态元素的事件

能否请您添加您的代码生成的输出html代码，以便我们知道使用的选择器是否正确！

获取在您的网站页面中呈现的代码。让我们通过聊天进行对话chat.***.com/rooms/201294/room-for-rishab-and-aditya

您好，我已经更新了代码并测试它工作正常，请替换为您的代码库