计算总和值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);
    });

Answer 2

您好 Fauzio，我创建了一个包含 3 列的示例表，
1. t_id（即 id ）
2. t_name（即名称 barang）
3. t_value（即股票di数据库）

我创建了一个表并显示了表中每一行的值。列 t_value 中的所有值都添加到 java 脚本数组中。然后当用户输入该特定行的值时。

单击按钮时，将从 db_column 和用户列中选取该特定行的值，并将结果打印在结果列中

<?php
     $sql = "SELECT t_id,t_name, t_value FROM test_table";
                $result = $conn->query($sql);
                if ($result->num_rows > 0) {
                    // output data of each row
                    $main_array = array();
                    $count=0;
                    while($row = $result->fetch_assoc()) {?>
                <tr>
                    <td class="no">

                        <?php  echo $count;?>
                    </td>
                    <td class="name">

                        <?php  echo $row["t_name"]."<br>";?>
                    </td>
                    <td class="db_value">
                        <?php 
                                  array_push($main_array,$row["t_value"]);
                                  echo $row["t_value"]."<br>";?>
                    </td>
                    <td class="user_value">
                        <form method="post">
                            <input type="number" value="">
                            <button id="cal" type="button" class="<?php echo $count;?>"> Calculate </button>
                        </form>
                    </td>
                    <td class="result">
                        <input type="tel" name="" value="" id="result_<?php echo $count;?>">
                    </td>
                </tr>
                <?php $count++;}?>

        </tbody>
    </table>
</div>

<script type="text/javascript">
    jQuery(document).ready(function() {
        var main_array = new Array();
        <?php foreach($main_array as $key => $val){ ?>
        main_array.push('<?php echo $val; ?>');
        <?php } ?>
        jQuery('#cal').on('click', function() {
            id = jQuery(this).attr('class');
            value_1st = main_array[id];
            value_2nd = jQuery(jQuery(this).closest('.user_value')).find('input[type="number"]').val();
            result = value_1st + value_2nd;
            input_field = jQuery(jQuery(jQuery(this).closest('.user_value')).next()).find('#result_' + id);
            input_field.val(result);

        });
    });
</script>