php - 计算总和值 jQuery PHP

Question

我在计算数据库和用户输入的数据总和时遇到问题，你们可以帮助我吗？

这是 PHP 代码

第一个值(stok di 数据库)是来自数据库的数据，第二个值(stok fisik)是来自用户输入的数据，selisih 是第二个值 - 第一个值。

        <div class="box-content nopadding" style="overflow: auto;">

            <table width="400px" class="table table-hover table-nomargin table-bordered">
                <thead>
                    <tr>
                        <th style="text-align: center; vertical-align:middle;" rowspan="2">No</th>
                        <th style="text-align: center; vertical-align:middle;" rowspan="2">Nama Barang</th>
                        <th style="text-align: center; vertical-align:middle;" colspan="2">Stok</th>
                        <th style="text-align: center; vertical-align:middle;" rowspan="2">Selisih</th>
                    </tr>
                    <tr>
                        <th style="text-align: center; vertical-align:middle;">Stok di Database</th>
                        <th style="text-align: center; vertical-align:middle;">Stok Fisik</th>
                    </tr>   
                </thead>
                <tbody>
                    <?php
                        $data = $db->query("select id, nama_barang, stock from tbl_atk group by nama_barang");
                        for ($i = 0; $i < count($data); $i++) {
                            $no = $i + 1;
                            if ($no % 2 ==0) $bg ='#FBFBFB';
                            else $bg = '#FFFFFF';
                            // $total = 'result' - $data[$i]['stock'];
                            $tot_masuk = $tot_masuk + "stock_op";
                            $tot_keluar = $tot_keluar + $data[$i]['stock'];
                            $grand_tot = $tot_masuk - $tot_keluar;

                    ?>

                    <tr>
                        <td style="text-align: center; vertical-align:middle;"><?php echo $no; ?></td>

                        <td><?php echo $data[$i]['nama_barang']?></td>

                        <td style="text-align: right;" class="so"><?php echo $data[$i]['stock']; ?></td>

                        <td><input type="number" class="form-control so" id="stock_op" name="stock_op" style="text-align: left"></td>

                        <td style="text-align: right; font-weight:bold;"><output class="result"></output></td>
                    </tr>
                    <?php                                           
                    }
                ?>
    <script src="../js/jquery.min.js"></script>
    <script>
        $(document).on('input','.so',function(){
            var totalSum = 0;
            var currentRow = $(this).closest('tr');
            currentRow.find('.so').each(function(){
                var inputVal = ($(this).is('input')) ? $(this).val() : parseInt($(this).html());
                console.log(inputVal);
                if($.isNumeric(inputVal)){
                    totalSum += parseFloat(inputVal);
        }
    });
    currentRow.find('.result').val(totalSum);
});
    </script>
                <tr style="background-color:#eaeaea; font-weight:bold;">
                    <td style="text-align: center; vertical-align:middle;"></td>
                        <td style="text-align: right;">Selisih</td>
                        <td style="text-align: right;"><?php echo $tot_keluar; ?></td>
                        <td style="text-align: right;"><?php echo $tot_masuk; ?></td>
                        <td style="text-align: right;"><?php echo $grand_tot; ?></td>
                </tr>
                </tbody>
            </table>

        </div>

这是User Interface

Answer 1

在下面的输入字段中将 .so 更改为 so。

<td style="text-align: right;" class="form-control .so"><?php echo $data[$i]['stock']; ?></td>
<td><input type="number" class="form-control .so" id="stock_op" name="stock_op" style="text-align: left"></td>

将下面行中的 id 结果更改为类结果

<td style="text-align: right; font-weight:bold;"><output id="result"></output></td>

新更新

为您的 stok fisik 细胞指定特定类别

<tr style="background-color:#eaeaea; font-weight:bold;">
                    <td style="text-align: center; vertical-align:middle;"></td>
                        <td style="text-align: right;">Selisih</td>
                        <td style="text-align: right;"><?php echo $tot_keluar; ?></td>
                        <td class="grandResult" style="text-align: right;"><?php echo $tot_masuk; ?></td>
                        <td style="text-align: right;"><?php echo $grand_tot; ?></td>
                </tr>

将你的 jquery 代码更改为此

    $(document).on('input','.so',function(){
var grandSum = 0;
        var totalSum = 0;
        var currentRow = $(this).closest('tr');
        currentRow.find('.so').each(function(){
            var inputVal = ($(this).is('input')) ? $(this).val() : parseInt($(this).html());
            if($.isNumeric(inputVal)){
                totalSum += parseFloat(inputVal);
            }
        });
        currentRow.find('.result').val(totalSum);

$('input.so').each(function(){
            var cVal = ($(this).is('input')) ? $(this).val() : parseInt($(this).html());
            if($.isNumeric(cVal)){
                grandSum += parseFloat(cVal);
            }
        });
        $('.grandResult').val(grandSum);
    });