如何在不影响上一个动态表的情况下更改表的动态行中的值?

时间:2019-01-29 06:11:11

标签: javascript

在动态表中,当我输入行的借方列时,贷方列应显示为“ 0”。 当我输入行的贷方列,借方列显示为“ 0”。  我的问题是,如果我在借方列中输入,贷方列显示为“ 0”。如果我在贷方列的下一行中输入,则上一行借方列也显示为“ 0”。仅现有行仅显示值“ 0“。我的代码也会影响上一行。

<script>
    $(document).ready(function(){
        $('.Debit').on('change input',function() {

                var amount = 0;
               var hh2 = 0;
               $('.tb3 > tbody  > tr').each(function() {
               var pamt = $(this).find('.Debit').val();

                 $(this).find('.Credit').val(0);


         hh2 += parseFloat(pamt);


                });

                $('#TotD').val(hh2);
        });



        $('.Credit').on('change input',function() {

                var amount = 0;

                 var hh2 = 0;
                $('.tb3 > tbody  > tr').each(function() {



$(this).find('.Debit').val(0);
                    var pamt = $(this).find('.Credit').val();



                    hh2 += parseFloat(pamt);

                });
                 $('#TotC').val(hh2);
        });

    });

</script>



 <div class="col-xs-12">
                    <div class="table-responsive pre-scrollable">
                        <table class="table table-bordered table-striped table-xxs tb3" id="tb3">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Account Name</th>
                                    <th>Debit</th>
                                    <th>Credit</th>
                                    <th>Particulars</th>
                                    <th>Cost Center</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr >
                                    <td><a href='javascript:void(0);' class='remove3'><span class='glyphicon glyphicon-remove'></span></a></td>

                                    <td><select style="width:120px" class="form-control" name="name[]" id="name">
                <option></option>
                <?php foreach ($PName as $row ): ?> 
                <option value="<?=$row['name']?>"><?=$row['name']?></option> 
                            <?php endforeach ?>
                        </select></td>

                                    <td ><input style="width:80px" type="text"  class="form-control input-xs Debit" name = "Debit[]"   > </td>


                                    <td><input style="width:80px" type="text"  class="form-control input-xs Credit"   name="Credit[]"></td>

                                    <td><input style="width:100px" type="text" id=""  class="form-control input-xs" value="" name="Parti[]"></td>


<td><input style="width:80px" type="text" id="Cost"  class="form-control input-xs" value="" name="Cost[]"></td>



                                    <td><a href="javascript:void(0);" style="font-size:18px;" id="addMore3" title="Add More Person"><span class="glyphicon glyphicon-plus"></td>



                                </tr>
                            </tbody>
                        </table>
</div>
                    </div>
                    <div class="col-xs-12 clearfix">

                        <div class="col-xs-6">

                            <div class="form-group "><br>
                                <label class="col-md-4 control-label">Total:</label>
                                <div class="col-md-4">

                                    <input type="text" placeholder="Your Amount" id="TotD" class="form-control grandto" name="TotD" value="0" >

                                </div>

                            </div>
                        </div>
                        <div class="col-xs-6">

                            <div class="form-group "><br>

                                <div class="col-md-4">

                                    <input type="text" placeholder="Your Amount" id="TotC" class="form-control grandto" name="TotC" value="0" >

                                </div>

                            </div>
                        </div>

                        </div>

3 个答案:

答案 0 :(得分:1)

这是因为通过循环each将所有贷方或借方值都设置为0!因此,将设置0的值移到each

之外
$('.Debit').on('change input',function() {    
  $(this).parent().parent().find('.Credit').val(0); // move from each loop
  ...remaining code

$('.Credit').on('change input',function() {    
  $(this).parent().parent().find('.Debit').val(0); // move from each loop
  ...remaining code

答案 1 :(得分:1)

您可以尝试类似的东西-

     $('.Debit').on('change input', function() {
        var debit = 0;
        var credit = 0;
        $(this).closest('tr').find('.Credit').val(0);
        $('.tb3 > tbody  > tr').each(function() {
            debit += parseFloat($(this).find('.Debit').val());
            credit += parseFloat($(this).find('.Credit').val());
        });
        $('#TotD').val(debit);
        $('#TotC').val(credit);
    });

    $('.Credit').on('change input', function() {
        var debit = 0;
        var credit = 0;
        $(this).closest('tr').find('.Debit').val(0);
        $('.tb3 > tbody  > tr').each(function() {
            debit += parseFloat($(this).find('.Debit').val());
            credit += parseFloat($(this).find('.Credit').val());
        });
        $('#TotD').val(debit);
        $('#TotC').val(credit);
    });

注意:由于当您在借方字段中输入的贷方值对该行的值变为0时,包括借方和贷方在内的总计计算也应该不仅反映一个(贷方或借方)。我还删除了未使用的金额变量。

答案 2 :(得分:0)

您在这里工作的小提琴吗?

我还看到您正在使用类来定位元素。这将影响所有具有此类的元素。

还请记住,find()搜索元素的所有后代,对所有后代执行代码,如下所示:

var pamt = $(this).find('.Credit').val();