为什么此代码在 jQuery 上无法正常工作
[英]Why this code is not working properly on jQuery
问题描述
I do not know where is the problem on this code and how to solve it.
我不知道这段代码的问题出在哪里以及如何解决。
I want to add form input field and also calculated on properly.我想添加表单输入字段并正确计算。
Problem described below:问题描述如下：
- when I click add row button this page refresh.当我单击添加行按钮时，此页面刷新。
- That wise I can't cheek the delete button.那个明智的我不能厚脸皮的删除按钮。
- The last field result on this form 'Payable' is show wrong answer.此表单“应付账款”的最后一个字段结果显示错误答案。
$(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 个解决方案
解决方案1
0 已采纳 2020-04-14 22:33:59
- Change the buttons to
type="button"instead of the defaulttype="submit"so they won't submit the form.将按钮更改为type="button"而不是默认的type="submit"，这样它们就不会提交表单。 - Convert the input values to numbers before adding them.在添加之前将输入值转换为数字。 Otherwise you're concatenating strings.否则，您将连接字符串。
$(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>
解决方案2
0 2020-04-14 22:34:57
Consider the following minor changes.考虑以下细微变化。
$(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>
You can use .preventDefault() to prevent the default event action.您可以使用.preventDefault()来阻止默认事件操作。 You can later return true to continue the event if desired.如果需要，您可以稍后返回 true 以继续该事件。
See More: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault查看更多： https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
解决方案3
0 2020-04-14 22:55:46
Use type="button" to stop the page from refreshing.使用type="button"停止页面刷新。
<button id="add_row" type="button" class="btn btn-default pull-left">Add Row</button>
Currently your calc functions are adding strings "1" + "3" = "13" Change the values to numbers.当前，您的 calc 函数正在添加字符串 "1" + "3" = "13" 将值更改为数字。 You can use parseInt() or parseFloat() eg您可以使用parseInt()或parseFloat()例如
$(this).find('.payable').val(parseFloat(total) + parseFloat(dcharge));
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
jQuery滚动代码无法正常工作 - jquery scroll code not working properly
为什么这个jquery代码不起作用 - Why this jquery code is not working
为什么这个jquery代码不起作用？ - why this jquery code is not working?
关闭切换菜单无法与JQuery代码一起正常使用 - Closing toggle menu not working properly with JQuery code
修复了标头无法与一个版本的jquery代码一起正常工作的原因，为什么第二个版本在Firefox中如此慢？ - Fixed header not working properly with one version of jquery code, why is my second version so slow in Firefox?
为什么我的JQuery AJAX函数无法正常工作？ - Why is my JQuery AJAX function not working properly?
为什么我的jquery .each（）函数无法正常工作？ - Why is my jquery .each() function not working properly?
JQuery`length`属性不能正常工作。 为什么？ - JQuery `length` property not working properly. Why?
为什么我的代码无法在其他设备上正常运行？ - Why is my code not working properly on other devices?
为什么我的 jquery 代码不起作用？ - why my jquery code is not working?
相关标签