使用Jquery删除新扩展的行时，表总数自动计算 [英] Table total auto-calculated when the newly expanded row is removed using Jquery

查看：56
本文介绍了使用Jquery删除新扩展的行时，表总数自动计算的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我的代码段给了我这个错误:this.closest is not a function，但是在我的页面上一切正常，所以让我们忘记这部分.

So my snippet gives me this error: this.closest is not a function but everything works fine in my page, so let's forget this part.

我的问题是我有一个表，当用户输入一些值时，可以自动计算列和行，请参考以下 https://stackoverflow.com/a/52642412/8826120 评论.现在，我要添加更多按钮，并且所有功能都可以正常工作(添加新的输入值)，但是当我删除新行时，它无法自动计算总值.

My question is I have a table where the column and rows can be auto-calculated when user input some values, referring this https://stackoverflow.com/a/52642412/8826120 comment. And now I am making add more button and all the functions are working fine(adding the new input values), but when I removed the new rows, it cannot auto-calculated the total values.

当新扩展的行被删除时，如何使我的总行自动更新?

How can I make my total line auto-update when the newly expanded row is removed?

您可以从下面检查它，但是正如我之前仅在此页面上所说的那样，我有error:this.closest is not a function.预先感谢

You can check it from below, but as I said before only on this page I've got error:this.closest is not a function. Thanks in advance

注意:我做这样的函数删除表行，更新总计jQuery的数据

Note: I make the function like this Remove table rows updating total data using jQuery

$(document).on('input change', '.outstanding, .received, .paid', updateTable);

function updateTable() {
  updateRow($(this).closest("tr"));
  updateCol($(this).closest("td"), $(this));
  updateTotal($(this.closest("table")));
}

function updateRow($row) {
  var sum = 0,
    sum2 = 0,
    sum3 = 0;
  $row.find('.outstanding, .received, .paid').each(function(i) {
    if (!isNaN(this.value) && this.value.length != 0) {
      if ($(this).hasClass('outstanding')) {
        out = $(this).val();
        sum += parseFloat(this.value);
      } else if ($(this).hasClass('received')) {
        reci = $(this).val();
        sum2 += parseFloat(this.value);
      } else if ($(this).hasClass('paid')) {
        paid = $(this).val()
        sum3 += parseFloat(this.value);
      }
    }
  });
  $row.find('.amtOutstanding').val(sum + sum2 + sum3);
}

function updateCol($col, $input) {
  var index = $col.index() + 1;
  var sum = 0;
  $col.closest('table').find('td:nth-child(' + index + ')').find('input').each(function(i) {
    if (!isNaN(this.value) && this.value.length != 0 && !$(this).attr('id')) {
      sum += parseFloat(this.value);
    }
  });

  if ($input.hasClass('outstanding')) {
    $('#sch26_outstanding').val(sum.toFixed(2));
  } else if ($input.hasClass('received')) {
    $('#sch26_received').val(sum.toFixed(2));
  } else if ($input.hasClass('paid')) {
    $('#sch26_paid').val(sum.toFixed(2));
  } else if ($input.hasClass('amtOutstanding')) {
    $('#sch26_amtOutstanding').val(sum.toFixed(2));
  }

}

function updateSchedule26() {
  var sum = 0,
    sum2 = 0,
    sum3 = 0,
    out, reci, paid;
  $('.outstanding, .received, .paid').each(function(i) {
    if (!isNaN(this.value) && this.value.length != 0) {
      if ($(this).hasClass('outstanding')) {
        sum += parseFloat(this.value);
      } else if ($(this).hasClass('received')) {
        sum2 += parseFloat(this.value);
      } else if ($(this).hasClass('paid')) {
        sum3 += parseFloat(this.value);
      }
    }
  });
  var total = (parseInt(out) + parseInt(reci)) + parseInt(paid);
  $(".amtOutstanding").val(parseFloat(total).toFixed(2));
  $('#sch26_outstanding').val(sum.toFixed(2));
  $('#sch26_received').val(sum2.toFixed(2));
  $('#sch26_paid').val(sum3.toFixed(2));
}

function updateTotal($table) {
  var sum = 0;
  $table.find('.amtOutstanding').each(function(i) {
    if (!isNaN(this.value) && this.value.length != 0) {
        sum += parseFloat(this.value);
    }
  });
  $('#sch26_amtOutstanding').val(sum.toFixed(2))
}

function addMoreDepIT() {
  var new_raw = $(
    '<tr>'+
      '<td><a href="javascript:void(0);" class="remove">Remove</td>'+
      '<td><input type="number" min="0" name="" id="" class="form-control outstanding"></td>'+
      '<td><input type="number" min="0" name="" id="" class="form-control received"></td>'+
      '<td><input type="number" min="0" name="" id="" class="form-control paid"></td>'+
      '<td><input type="number" min="0" name="" id="" class="form-control amtOutstanding" readonly></td>'+
    '</tr>'
  );
  new_raw.insertBefore('#addMore');
  $("#dep_it_table").on('click', '.remove', function() {
      $(this).closest('tr').remove();
      updateTable();
  });
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<table class="table table-sm" id="dep_it_table">
  <thead>
    <tr>
      <th style="width:16.67%">Name</th>
      <th style="width:16.67%">Outstanding</th>
      <th style="width:16.67%">Received</th>
      <th style="width:16.67%">Paid</th>
      <th style="width:16.67%">Sub Total</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>Name 1</td>
      <td><input type="number" name="" id="" class="form-control outstanding"></td>
      <td><input type="number" name="" id="" class="form-control received"></td>
      <td><input type="number" name="" id="" class="form-control paid"></td>
      <td><input type="number" name="" id="" class="form-control amtOutstanding" readonly></td>
    </tr>
    <tr>
      <td>Name 2</td>
      <td><input type="number" name="" id="" class="form-control outstanding"></td>
      <td><input type="number" name="" id="" class="form-control received"></td>
      <td><input type="number" name="" id="" class="form-control paid"></td>
      <td><input type="number" name="" id="" class="form-control amtOutstanding" readonly></td>
    </tr>
    
    <tr id="addMore">
      <td><a href="javascript:void(0)" class="btn btn-primary" style="padding:0px;" onclick="addMoreDepIT()"><i class="ft-plus hidden-lg-up"></i>&nbsp;Add More</a></td>
      <td></td><td></td><td></td><td></td>
  </tr>

    <tr>
      <td>Add Total</td>
      <td><input type="number" name="" id="sch26_outstanding" class="form-control total_sum" readonly></td>
      <td><input type="number" name="" id="sch26_received" class="form-control total_sum" readonly></td>
      <td><input type="number" name="" id="sch26_paid" class="form-control total_sum" readonly></td>
      <td><input type="number" name="" id="sch26_amtOutstanding" class="form-control" readonly></td>
    </tr>
  </tbody>
</table>

推荐答案

首先，您需要将已删除行的所有输入都设置为0，然后重新计算每个列和行总数，然后删除该行:

First you need to set all input of removed row to 0 and then recalculate every col and row total then you remove the row:

$("#dep_it_table").on('click', '.remove', function() {
      var row = $(this).closest('tr');
      row.find(".outstanding, .received, .paid").each(function(){
         $(this).val(0)
         $(this).change();
      });
      row.remove();
});


$(document).on('input change', '.outstanding, .received, .paid', updateTable);

function updateTable() {
  updateRow($(this).closest("tr"));
  updateCol($(this).closest("td"), $(this));
  updateTotal($(this.closest("table")));
}

function updateRow($row) {
  var sum = 0,
    sum2 = 0,
    sum3 = 0;
  $row.find('.outstanding, .received, .paid').each(function(i) {
    if (!isNaN(this.value) && this.value.length != 0) {
      if ($(this).hasClass('outstanding')) {
        out = $(this).val();
        sum += parseFloat(this.value);
      } else if ($(this).hasClass('received')) {
        reci = $(this).val();
        sum2 += parseFloat(this.value);
      } else if ($(this).hasClass('paid')) {
        paid = $(this).val()
        sum3 += parseFloat(this.value);
      }
    }
  });
  $row.find('.amtOutstanding').val(sum + sum2 + sum3);
}

function updateCol($col, $input) {
  var index = $col.index() + 1;
  var sum = 0;
  $col.closest('table').find('td:nth-child(' + index + ')').find('input').each(function(i) {
    if (!isNaN(this.value) && this.value.length != 0 && !$(this).attr('id')) {
      sum += parseFloat(this.value);
    }
  });

  if ($input.hasClass('outstanding')) {
    $('#sch26_outstanding').val(sum.toFixed(2));
  } else if ($input.hasClass('received')) {
    $('#sch26_received').val(sum.toFixed(2));
  } else if ($input.hasClass('paid')) {
    $('#sch26_paid').val(sum.toFixed(2));
  } else if ($input.hasClass('amtOutstanding')) {
    $('#sch26_amtOutstanding').val(sum.toFixed(2));
  }

}

function updateSchedule26() {
  var sum = 0,
    sum2 = 0,
    sum3 = 0,
    out, reci, paid;
  $('.outstanding, .received, .paid').each(function(i) {
    if (!isNaN(this.value) && this.value.length != 0) {
      if ($(this).hasClass('outstanding')) {
        sum += parseFloat(this.value);
      } else if ($(this).hasClass('received')) {
        sum2 += parseFloat(this.value);
      } else if ($(this).hasClass('paid')) {
        sum3 += parseFloat(this.value);
      }
    }
  });
  var total = (parseInt(out) + parseInt(reci)) + parseInt(paid);
  $(".amtOutstanding").val(parseFloat(total).toFixed(2));
  $('#sch26_outstanding').val(sum.toFixed(2));
  $('#sch26_received').val(sum2.toFixed(2));
  $('#sch26_paid').val(sum3.toFixed(2));
}

function updateTotal($table) {
  var sum = 0;
  $table.find('.amtOutstanding').each(function(i) {
    if (!isNaN(this.value) && this.value.length != 0) {
        sum += parseFloat(this.value);
    }
  });
  $('#sch26_amtOutstanding').val(sum.toFixed(2))
}

function addMoreDepIT() {
  var new_raw = $(
    '<tr>'+
      '<td><a href="javascript:void(0);" class="remove">Remove</td>'+
      '<td><input type="number" min="0" name="" id="" class="form-control outstanding"></td>'+
      '<td><input type="number" min="0" name="" id="" class="form-control received"></td>'+
      '<td><input type="number" min="0" name="" id="" class="form-control paid"></td>'+
      '<td><input type="number" min="0" name="" id="" class="form-control amtOutstanding" readonly></td>'+
    '</tr>'
  );
  new_raw.insertBefore('#addMore');
  $("#dep_it_table").on('click', '.remove', function() {
      var row = $(this).closest('tr');
      row.find(".outstanding, .received, .paid").each(function(){
  	     $(this).val(0)
  	     $(this).change();
      });
      row.remove();
  });
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<table class="table table-sm" id="dep_it_table">
  <thead>
    <tr>
      <th style="width:16.67%">Name</th>
      <th style="width:16.67%">Outstanding</th>
      <th style="width:16.67%">Received</th>
      <th style="width:16.67%">Paid</th>
      <th style="width:16.67%">Sub Total</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>Name 1</td>
      <td><input type="number" name="" id="" class="form-control outstanding"></td>
      <td><input type="number" name="" id="" class="form-control received"></td>
      <td><input type="number" name="" id="" class="form-control paid"></td>
      <td><input type="number" name="" id="" class="form-control amtOutstanding" readonly></td>
    </tr>
    <tr>
      <td>Name 2</td>
      <td><input type="number" name="" id="" class="form-control outstanding"></td>
      <td><input type="number" name="" id="" class="form-control received"></td>
      <td><input type="number" name="" id="" class="form-control paid"></td>
      <td><input type="number" name="" id="" class="form-control amtOutstanding" readonly></td>
    </tr>
    
    <tr id="addMore">
      <td><a href="javascript:void(0)" class="btn btn-primary" style="padding:0px;" onclick="addMoreDepIT()"><i class="ft-plus hidden-lg-up"></i>&nbsp;Add More</a></td>
      <td></td><td></td><td></td><td></td>
  </tr>

    <tr>
      <td>Add Total</td>
      <td><input type="number" name="" id="sch26_outstanding" class="form-control total_sum" readonly></td>
      <td><input type="number" name="" id="sch26_received" class="form-control total_sum" readonly></td>
      <td><input type="number" name="" id="sch26_paid" class="form-control total_sum" readonly></td>
      <td><input type="number" name="" id="sch26_amtOutstanding" class="form-control" readonly></td>
    </tr>
  </tbody>
</table>

这篇关于使用Jquery删除新扩展的行时，表总数自动计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆