为什么此代码在 jQuery 上无法正常工作

Question

我不知道这段代码的问题在哪里以及如何解决。

我想添加表单输入字段并正确计算。

问题描述如下：

当我单击添加行按钮时，此页面会刷新。
那个明智的我不能厚颜无耻的删除按钮。
此表单的最后一个字段结果 'Payable' 显示错误答案。

$(document).ready(function() {
  var i = 1;
  $("#add_row").click(function() {
    b = i - 1;
    $('#addr' + i).html($('#addr' + b).html()).find('td:first-child').html(i + 1);
    $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
    i++;
  });
  $("#delete_row").click(function() {
    if (i > 1) {
      $("#addr" + (i - 1)).html('');
      i--;
    }
    calc();
  });

  $('#tab_logic tbody').on('keyup change', function() {
    calc();
  });

  $('#tab_logic tbody').on('keyup change', function() {
    calc_tot();
  });
});

function calc() {
  $('#tab_logic tbody tr').each(function(i, element) {
    var html = $(this).html();
    if (html != '') {
      var discount = $(this).find('.discount').val();
      var price = $(this).find('.price').val();
      $(this).find('.total').val(price - discount);
    }
  });
}

function calc_tot() {
  $('#tab_logic tbody tr').each(function(i, element) {
    var html = $(this).html();
    if (html != '') {
      var total = $(this).find('.total').val();
      var dcharge = $(this).find('.dcharge').val();
      $(this).find('.payable').val(total + dcharge);
    }
  });
}

#form-field {
  list-style-type: none;
  margin-block-start: 0px;
  margin-block-end: 0px;
  padding-inline-start: 20px;
}

#dividing-field {
  border: 1px solid black !important;
  margin-bottom: 25px;
}

#form-btn1,
#form-btn2 {
  float: right;
}

#form-btn2 {
  margin-right: 15px;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container-fluid">
    <div class="main_container">
      <div class="content">
        <form class="">
          <ul class="row" id="form-field">
            <li class="col-sm-9">
              <div class="row">
                <div class="form-group col-md-12">
                  <table class="table table-bordered table-hover" id="tab_logic">
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Pack No</th>
                        <th>Serial No</th>
                        <th>Discount</th>
                        <th>Total</th>
                        <th>Delevery Charge</th>
                        <th>Payable</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr id="addr0">
                        <td>1</td>
                        <td>
                          <select class="form-control">
                            <option>ABC</option>
                            <option>BAC</option>
                            <option>CBA</option>
                          </select>
                        </td>
                        <td>
                          <input class="form-control price" type="number" name="price" step="0.00" min="0">
                        </td>
                        <td>
                          <input class="form-control" type="text" name="">
                        </td>
                        <td>
                          <input class="form-control" type="text" name="">
                        </td>
                        <td>
                          <input class="form-control discount" type="number" name="" step="0" min="0">
                        </td>
                        <td>
                          <input class="form-control total" type="number" name="" placeholder="0.00" readonly="">
                        </td>
                        <td>
                          <input class="form-control dcharge" type="number" name="" step="0.00" min="0">
                        </td>
                        <td>
                          <input class="form-control payable" type="number" name="" placeholder="0.00" readonly="">
                        </td>
                      </tr>
                      <tr id="addr1"></tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="row">
                <div class="form-group col-md-12">
                  <button id="add_row" class="btn btn-default pull-left">Add Row</button>
                  <button id='delete_row' class="pull-right btn btn-default">Delete Row</button>
                </div>
              </div>
            </li>
          </ul>
        </form>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

将按钮更改为 type="button" 而不是默认的 type="submit" 这样他们就不会提交表单。
在相加之前将输入值转换为数字。否则你就是在连接字符串。

$(document).ready(function() {
  var i = 1;
  $("#add_row").click(function() {
    b = i - 1;
    $('#addr' + i).html($('#addr' + b).html()).find('td:first-child').html(i + 1);
    $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
    i++;
  });
  $("#delete_row").click(function() {
    if (i > 1) {
      $("#addr" + (i - 1)).html('');
      i--;
    }
    calc();
  });

  $('#tab_logic tbody').on('keyup change', function() {
    calc();
  });

  $('#tab_logic tbody').on('keyup change', function() {
    calc_tot();
  });
});

function calc() {
  $('#tab_logic tbody tr').each(function(i, element) {
    var html = $(this).html();
    if (html != '') {
      var discount = parseInt($(this).find('.discount').val()) || 0;
      var price = parseInt($(this).find('.price').val()) || 0;
      $(this).find('.total').val(price - discount);
    }
  });
}

function calc_tot() {
  $('#tab_logic tbody tr').each(function(i, element) {
    var html = $(this).html();
    if (html != '') {
      var total = parseInt($(this).find('.total').val()) || 0;
      var dcharge = parseInt($(this).find('.dcharge').val()) || 0;
      $(this).find('.payable').val(total + dcharge);
    }
  });
}

#form-field {
  list-style-type: none;
  margin-block-start: 0px;
  margin-block-end: 0px;
  padding-inline-start: 20px;
}

#dividing-field {
  border: 1px solid black !important;
  margin-bottom: 25px;
}

#form-btn1,
#form-btn2 {
  float: right;
}

#form-btn2 {
  margin-right: 15px;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container-fluid">
    <div class="main_container">
      <div class="content">
        <form class="">
          <ul class="row" id="form-field">
            <li class="col-sm-9">
              <div class="row">
                <div class="form-group col-md-12">
                  <table class="table table-bordered table-hover" id="tab_logic">
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Pack No</th>
                        <th>Serial No</th>
                        <th>Discount</th>
                        <th>Total</th>
                        <th>Delevery Charge</th>
                        <th>Payable</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr id="addr0">
                        <td>1</td>
                        <td>
                          <select class="form-control">
                            <option>ABC</option>
                            <option>BAC</option>
                            <option>CBA</option>
                          </select>
                        </td>
                        <td>
                          <input class="form-control price" type="number" name="price" step="0.00" min="0">
                        </td>
                        <td>
                          <input class="form-control" type="text" name="">
                        </td>
                        <td>
                          <input class="form-control" type="text" name="">
                        </td>
                        <td>
                          <input class="form-control discount" type="number" name="" step="0" min="0">
                        </td>
                        <td>
                          <input class="form-control total" type="number" name="" placeholder="0.00" readonly="">
                        </td>
                        <td>
                          <input class="form-control dcharge" type="number" name="" step="0.00" min="0">
                        </td>
                        <td>
                          <input class="form-control payable" type="number" name="" placeholder="0.00" readonly="">
                        </td>
                      </tr>
                      <tr id="addr1"></tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="row">
                <div class="form-group col-md-12">
                  <button type="button" id="add_row" class="btn btn-default pull-left">Add Row</button>
                  <button type="button" id='delete_row' class="pull-right btn btn-default">Delete Row</button>
                </div>
              </div>
            </li>
          </ul>
        </form>
      </div>
    </div>
  </div>
</body>

</html>

Answer 2

考虑以下小改动。

$(function() {
  var i = 1;

  function calc() {
    $('#tab_logic tbody tr').each(function(i, element) {
      var html = $(this).html();
      if (html != '') {
        var discount = $(this).find('.discount').val();
        var price = $(this).find('.price').val();
        $(this).find('.total').val(price - discount);
      }
    });
  }

  function calc_tot() {
    $('#tab_logic tbody tr').each(function(i, element) {
      var html = $(this).html();
      if (html != '') {
        var total = $(this).find('.total').val();
        var dcharge = $(this).find('.dcharge').val();
        $(this).find('.payable').val(total + dcharge);
      }
    });
  }

  $("#add_row").click(function(e) {
    e.preventDefault();
    b = i - 1;
    $('#addr' + i).html($('#addr' + b).html()).find('td:first-child').html(i + 1);
    $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
    i++;
  });

  $("#delete_row").click(function(e) {
    e.preventDefault();
    if (i > 1) {
      $("#addr" + (i - 1)).html('');
      i--;
    }
    calc();
  });

  $('#tab_logic tbody').on('keyup change', "input", function() {
    calc();
    calc_tot();
  });
});

#form-field {
  list-style-type: none;
  margin-block-start: 0px;
  margin-block-end: 0px;
  padding-inline-start: 20px;
}

#dividing-field {
  border: 1px solid black !important;
  margin-bottom: 25px;
}

#form-btn1,
#form-btn2 {
  float: right;
}

#form-btn2 {
  margin-right: 15px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<div class="container-fluid">
  <div class="main_container">
    <div class="content">
      <form class="">
        <ul class="row" id="form-field">
          <li class="col-sm-9">
            <div class="row">
              <div class="form-group col-md-12">
                <table class="table table-bordered table-hover" id="tab_logic">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Name</th>
                      <th>Price</th>
                      <th>Pack No</th>
                      <th>Serial No</th>
                      <th>Discount</th>
                      <th>Total</th>
                      <th>Delevery Charge</th>
                      <th>Payable</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr id="addr0">
                      <td>1</td>
                      <td>
                        <select class="form-control">
                          <option>ABC</option>
                          <option>BAC</option>
                          <option>CBA</option>
                        </select>
                      </td>
                      <td>
                        <input class="form-control price" type="number" name="price" step="0.00" min="0">
                      </td>
                      <td>
                        <input class="form-control" type="text" name="">
                      </td>
                      <td>
                        <input class="form-control" type="text" name="">
                      </td>
                      <td>
                        <input class="form-control discount" type="number" name="" step="0" min="0">
                      </td>
                      <td>
                        <input class="form-control total" type="number" name="" placeholder="0.00" readonly="">
                      </td>
                      <td>
                        <input class="form-control dcharge" type="number" name="" step="0.00" min="0">
                      </td>
                      <td>
                        <input class="form-control payable" type="number" name="" placeholder="0.00" readonly="">
                      </td>
                    </tr>
                    <tr id="addr1"></tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="row">
              <div class="form-group col-md-12">
                <button id="add_row" class="btn btn-default pull-left">Add Row</button>
                <button id='delete_row' class="pull-right btn btn-default">Delete Row</button>
              </div>
            </div>
          </li>
        </ul>
      </form>
    </div>
  </div>
</div>

您可以使用.preventDefault() 来阻止默认事件操作。如果需要，您稍后可以 return true 继续活动。

查看更多：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Answer 3

使用type="button"停止页面刷新。

<button id="add_row" type="button" class="btn btn-default pull-left">Add Row</button>

目前您的计算函数正在添加字符串“1”+“3”=“13” 将值更改为数字。您可以使用 parseInt() 或 parseFloat() 例如

$(this).find('.payable').val(parseFloat(total) + parseFloat(dcharge));

为什么此代码在 jQuery 上无法正常工作

Why this code is not working properly on jQuery

html

javascript

jquery

jquery-calculation