Question

我想创建一个表，可以为每行的每个字段自动计算一些值。我发现这些jquery计算器，我想问我将如何使用它，因为我将使用jstl forEach，我怎么能使用它，所以我会自动计算用户在每个行的字段上输入的内容。谢谢..

<html>
    <head>
       <script type="text/javascript"  src="js/jquery-latest.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
                          $(document).ready(function()
                        {
                            $('input').change(function()
                            {
                                var ProductUnitVal = parseInt($('#product-unit-val').val());
                                var TotalUnitSales = parseInt($('#total-unit-sales').val());

                                var answer = ProductUnitVal * TotalUnitSales;

                                $('#sales-val').html('$' + answer);
                            });
                        });
           </script>
    </head>
    <body>       

        Unit Value <input type="text" id="product-unit-val" /><br />
        Unit Sales <input type="text" id="total-unit-sales" /><br />
        <span id="sales-val"></span>

    </body>
</html>

Answer 1

以行为基础。当输入发生变化时，查找最接近的行（tr），该行找到元素的范围。然后只搜索各种元素的范围（即行）。注意，我为3个项目从id更改为class。

<table id="thetable">
<tr>
<td>
Unit Value <input type="text" class="product-unit-val" />
</td>
<td>
Unit Sales <input type="text" class="total-unit-sales" />
</td>
<td><span class="sales-val"></span></td>
</tr>
</table>

然后是你的剧本：

                    $(document).ready(function()
                    {
                        $('#thetable input').change(function()
                        {
                            var $row = $(this).closest('tr');

                            var ProductUnitVal = parseInt($row.find('.product-unit-val').val());
                            var TotalUnitSales = parseInt($row.find('.total-unit-sales').val());

                            var answer = ProductUnitVal * TotalUnitSales;

                            $row.find('.sales-val').html('$' + answer);
                        });
                    });

每行自动计算器

1 个答案: