Почему этот код не работает должным образом на jQuery - PullRequest
Новая
       4

Почему этот код не работает должным образом на jQuery

0 голосов
/ 15 апреля 2020

Я не знаю, где проблема в этом коде и как ее решить.

Я хочу добавить поле ввода формы, а также правильно рассчитать.

Проблема описана ниже:

  1. когда я нажимаю кнопку добавления строки, эта страница refre sh.
  2. Поэтому я не могу щекотать кнопку удаления.
  3. Последнее поле результата на этом Форма 'К оплате' показывает неправильный ответ. 

$(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>

Ответы [ 3 ]

0 голосов
/ 15 апреля 2020

Рассмотрим следующие незначительные изменения. 

$(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(), чтобы предотвратить действие по умолчанию для события. Позже вы можете вернуть true, чтобы продолжить событие, если это необходимо.

См. Подробнее: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

0 голосов
/ 15 апреля 2020

Используйте type="button", чтобы остановить обновление страницы.

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

В настоящее время ваши функции cal c добавляют строки "1" + "3" = "13" Измените значения на цифры. Вы можете использовать parseInt() или parseFloat() например

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

0 голосов
/ 15 апреля 2020
  1. Измените кнопки на type="button" вместо значений по умолчанию type="submit", чтобы они не отправляли форму.
  2. Преобразуйте входные значения в числа перед их добавлением. В противном случае вы объединяете строки. 

$(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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...