小贝子编程

为什么此代码在jQuery上不能正常工作



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

我想添加表单输入字段，并对其进行正确的计算。

下面描述的问题：

  1. 当我单击添加行按钮时，此页面将刷新
  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>

  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>

考虑以下小更改。

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

使用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));

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium