时间戳

首页 > 解决方案 > 如何在这个 JQuery 中计算

javascript - 如何在这个 JQuery 中计算

问题描述

我在 html 中的 jQuery 有问题。只需要在计算中进行一些更改，以下是我的代码所有结果将像我一样在一个字段中计算

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1"></script>

      <script>
        $(document).on('keyup','input.expenses','input.deductions',function(){
          $expenses = $(this).parents('tr').find('.expenses');
          $deductions = $(this).parents('tr').find('.deductions');
          $expenseTotal = $(this).parents('tr').find('#total');
          $expenseTotal.val('0');
          $.each($expenses,function(index,object){    
            if($(object).val()!='')
            {
         $expenseTotal.val(parseInt($expenseTotal.val())+parseInt($(object).val()));
            }
          })
        });
      </script>
    </pre>
                    
    
        <   <tbody>';
    
                foreach($data as $d)
                {
                    print '<tr>
                    <td>'.$d["staff_name"].'</td>
                    <td><input type="hidden" name="txtid[]" value="'.$d["id"].'">
                        <input type="text" name="txtbasic[]" class="form-control expenses">
                    </td>
                    <td><input type="text" name="txtallowance[]" class="form-control expenses"></td>
                    <td><input type="text" name="txtsocso[]" class="form-control deductions"></td>
                    <td><input type="text" name="txtkwsp[]" class="form-control deductions"></td>
                    <td><input type="text" id="total" name="txttotal[]" class="form-control"></td>
                    </tr>';
                }
                print '</tbody>

现有结果

txttotal = txtbasic + txtallowance

我需要的结果是

txttotal = txtbasic + txtallowance - txtsocso - txtkwsp

然后在键上显示结果，请任何人都可以帮助我

标签： javascripthtmljquery

解决方案

您的代码存在一些逻辑/结构问题，因此我将首先解释每个问题，然后在底部您可以找到生成的代码

KeyUp 事件语法错误

为确保您keyup在所有字段上均列出，您需要在同一参数中用逗号分隔，而不是

on('keyup','input.expenses','input.deductions',function()

一定是

on('keyup','input.expenses, input.deductions',function()

在循环中使用 ID

您正在使用 foreach循环来生成表格行。所以你会有很多具有相同内容的行，这很好。但是，对于行的最后一个单元格，您使用id="total"的是错误的，因为在任何 HTML 页面中只能有 1 个具有唯一 ID 的元素。使用您的代码，您将拥有最后一个具有相同 ID 的所有行td。

因此，您需要删除 ID 并改用一个类。

从

input type="text" id="total" name="txttotal[]" class="form-control"

你去

input type="text" name="txttotal[]" class="form-control total"

正确循环元素

目前，您的代码仅循环.expensesso txtbasic和txtallowance值。您还需要循环deductions获取txtsocso和 txtkwsp

最终代码

Javascript

<script>
    $(document).on('keyup', 'input.expenses, input.deductions', function () {

        var total = 0;
        // Adding txtbasic and txtallowance
        $expenses = $(this).parents('tr').find('.expenses');
        $.each($expenses, function (index, object) {
            var val = parseInt($(object).val())
            if(!isNaN(val) && val) {
                total += parseInt($(object).val());
            }
        });

        // Adding txtsocso and txtkwsp
        $deductions = $(this).parents('tr').find('.deductions');
        $.each($deductions, function (index, object) {
            var val = parseInt($(object).val())
            if(!isNaN(val) && val) {
                total -= parseInt($(object).val());
            }
        });

        // Updating the Total
        $expenseTotal = $(this).parents('tr').find('.total');
        $expenseTotal.val(total)
    });
</script>

HTML TR 代码

        <tr>
            <td>'.$d["staff_name"].'</td>
            <td><input type="hidden" name="txtid[]" value="'.$d["id"].'">
                <input type="text" name="txtbasic[]" class="form-control expenses">
            </td>
            <td><input type="text" name="txtallowance[]" class="form-control expenses"></td>
            <td><input type="text" name="txtsocso[]" class="form-control deductions"></td>
            <td><input type="text" name="txtkwsp[]" class="form-control deductions"></td>
            <td><input type="text" name="txttotal[]" class="form-control total"></td>
        </tr>
    </tbody>
</table>
``

推荐阅读