html - 如何添加行和删除行再次计算？
问题描述
function autoCalcSetup(){
$('form[name=transactions]').jAutoCalc('destroy');
$('form[name=transactions] tr[name=services]').jAutoCalc({keyEventsFire: true, decimalPlaces: 2, emptyAsZero: true});
$('form[name=transactions]').jAutoCalc({decimalPlaces: 2});
}
autoCalcSetup();
$('button[name=remove]').click(function(e){
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e){
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=services]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});<!DOCTYPE html>
<html lang="en">
<!-- blank.html 21 Nov 2019 03:54:41 GMT -->
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>I-MED HEALTHCARE</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="assets/css/app.min.css">
<link rel="stylesheet" href="assets/bundles/bootstrap-daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="assets/bundles/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css">
<link rel="stylesheet" href="assets/bundles/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="assets/bundles/jquery-selectric/selectric.css">
<link rel="stylesheet" href="assets/bundles/bootstrap-timepicker/css/bootstrap-timepicker.min.css">
<link rel="stylesheet" href="assets/bundles/datatables/datatables.min.css">
<link rel="stylesheet" href="assets/bundles/datatables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.jsdelivr.net/npm/jautocalc@1.3.1/dist/jautocalc.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Template CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/components.css">
<!-- Custom style CSS -->
<link rel="stylesheet" href="assets/css/custom.css">
<link rel='shortcut icon' type='image/x-icon' href='assets/img/imed.png' />
</head>
<body>
<div class="loader"></div>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<!-- top bar -->
<?php require_once("include/topbar.php"); ?>
<!-- top bar -->
<!-- side bar -->
<?php require_once("include/sidebar.php"); ?>
<!-- side bar -->
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-body">
<!-- add content here -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3>Patient Transactions</h3>
</div>
<div class="card-body">
<div class="form-group">
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target=".bd-example-modal-xl">Find Patient</button>
</div>
<div class="container">
<form name="transactions">
<table class="table table-hover table-bordered table-striped" name="transactions">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Item Total</th>
</tr>
</thead>
<tbody>
<tr name="services">
<td><button class="btn btn-primary" name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" class="form-control" name="qty" value="3"></td>
<td><input type="text" class="form-control" name="price" value="12"></td>
<td><input type="text" style="text-align:right" class="form-control" name="item_total" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="2"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" style="text-align:right" class="form-control" name="subtotal" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Tax</td>
<td>
<select class="form-control" name="tax">
<option value=".06">CT Tax</option>
<option value=".00">Tax Free</option>
</select>
</td>
<td><input type="text" style="text-align:right" class="form-control" name="tax_total" jAutoCalc="{subtotal} * {tax}"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Total</td>
<td> </td>
<td><input type="text" style="text-align:right" class="form-control" name="grand_total" jAutoCalc="{subtotal} + {tax_total}"></td>
</tr>
<tr>
<td colspan="4"></td>
<td><button class="btn btn-primary" name="add">Add Row</button></td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="text-right">
<button type="submit" class="btn btn-primary btn-icon icon-right" name="save"><i class="fas fa-file-invoice"></i> Process Payment</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<!-- End of Main Content -->
<!-- FIND PATIENT TABLE MODAL -->
<div class="modal fade bd-example-modal-xl" id="select-patient"tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myLargeModalLabel">Find Patient</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="section-body">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4> </h4>
</div>
<div class="card-body">
<div class="table-responsive">
<?php
require_once("include/connect.php");
try{
$sql="SELECT patient_id, CONCAT(patient_lname, ', ', patient_fname, ' ', patient_mi) AS Fullname, top, pay_method FROM tbl_patientinfo WHERE isDeleted='0'";
$result=$con->prepare($sql);
$result->execute();
?>
<table class="table table-hover" id="table-1">
<thead>
<tr>
<th class="text-center">
#
</th>
<th>Patient Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<?php while($row=$result->fetch()){ ?>
<tr style="cursor: pointer;">
<td><?php echo $row['patient_id']; ?></td>
<td><?php echo $row['Fullname']; ?></td>
<td><?php echo $row['top']; ?></td>
<td><?php echo $row['pay_method']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<?php
} catch (PDOException $th){
echo "Error: ".$th->getMessage();
}
$con=null;
?>
<script>
var table = document.getElementById('table-1');
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
//rIndex = this.rowIndex;
document.getElementById("txt-patient_id").value = this.cells[0].innerHTML;
document.getElementById("txt-patient_name").value = this.cells[1].innerHTML;
document.getElementById("txt-payMethod").value = this.cells[3].innerHTML;
$('#select-patient').modal('hide');
};
}
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of FIND PATIENT TABLE MODAL -->
<!-- setting bar -->
<?php require_once("include/settingbar.php"); ?>
<!-- setting bar -->
<!-- footer bar -->
<?php require_once("include/footer.php"); ?>
<!-- footer bar -->
<script type="text/javascript" src="assets/bundles/CRUD/transaction.js"></script>
<!-- General JS Scripts -->
<script src="assets/js/app.min.js"></script>
<script src="assets/bundles/datatables/datatables.min.js"></script>
<script src="assets/bundles/datatables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>
<!-- JS Libraies -->
<script src="assets/bundles/cleave-js/dist/cleave.min.js"></script>
<script src="assets/bundles/cleave-js/dist/addons/cleave-phone.us.js"></script>
<script src="assets/bundles/jquery-pwstrength/jquery.pwstrength.min.js"></script>
<script src="assets/bundles/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/bundles/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="assets/bundles/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
<script src="assets/bundles/select2/dist/js/select2.full.min.js"></script>
<script src="assets/bundles/jquery-selectric/jquery.selectric.min.js"></script>
<script src="assets/bundles/sweetalert/sweetalert.min.js"></script>
<!-- Page Specific JS File -->
<script src="assets/js/page/forms-advanced-forms.js"></script>
<script src="assets/js/page/sweetalert.js"></script>
<script src="assets/js/page/datatables.js"></script>
<!-- Template JS File -->
<script src="assets/js/scripts.js"></script>
<!-- Custom JS File -->
<script src="assets/js/custom.js"></script>
<script src="assets/js/page/sweetalert.js"></script>
</body>
<!-- blank.html 21 Nov 2019 03:54:41 GMT -->
</html>我在添加和删除行时遇到问题。当我使用 jAutoCalc 库键入数字来计算它时，它正在工作。所以我对此没有任何问题。但是当我想添加一些行并删除一些行时，它什么也没有显示。而且我在我的程序中看不到任何错误。但是根据我的浏览器中的检查（我使用的是 Microsoft Edge），我在“$new.jAutoCalc('destroy'); ”中有一个错误，它说“$new.jAutoCalc”不是一个函数。
我使用以下代码：
function autoCalcSetup() {
$('form[name=transactions]').jAutoCalc('destroy');
$('form[name=transactions] tr[name=services]').jAutoCalc({
keyEventsFire: true,
decimalPlaces: 2,
emptyAsZero: true
});
$('form[name=transactions]').jAutoCalc({
decimalPlaces: 2
});
}
autoCalcSetup();
$('button[name=remove]').click(function(e) {
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e) {
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=services]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy'); //this is my error (According to Inspects in Browser)
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form name="transactions">
<table class="table table-hover table-bordered table-striped" name="transactions">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Item Total</th>
</tr>
</thead>
<tbody>
<tr name="services">
<td><button class="btn btn-primary" name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" class="form-control" name="qty" value="3"></td>
<td><input type="text" class="form-control" name="price" value="12"></td>
<td><input type="text" class="form-control" name="item_total" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="2"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" class="form-control" name="subtotal" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Tax</td>
<td>
<select class="form-control" name="tax">
<option value=".06">CT Tax</option>
<option value=".00">Tax Free</option>
</select>
</td>
<td><input type="text" class="form-control" name="tax_total" jAutoCalc="{subtotal} * {tax}"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Total</td>
<td> </td>
<td><input type="text" class="form-control" name="grand_total" jAutoCalc="{subtotal} + {tax_total}"></td>
</tr>
<tr>
<td colspan="4"></td>
<td><button class="btn btn-primary" name="add">Add Row</button></td>
</tr>
</tbody>
</table>
</form>
</div>我希望你能帮助我解决这个问题。如果您有任何问题，请随时在下面发表评论，我会尽力回答，只是为了解决我的问题。我需要为我们的 Capstone 项目做这件事。非常感谢！上帝祝福你！:D
解决方案
推荐阅读
- python - Python正则表达式查找给定字符串中存在的模式
- scala - 如何在空的 Spark DataFrame 中添加特殊情况行？
- excel - 试图用字母后跟数字分隔单元格
- php - phpdoc：PHP 警告：count()：参数必须是数组或实现 Countable 的对象
- javascript - 将 javascript 的变量传递给 php 到当前页面
- python - 字典中值之间的百分比差异
- android - 在 Fragment 内的 HorizontalScrollView 中捕捉
- java - 如何在androidX中实现一个警告对话框
- flutter - 如何将 Row 中每个元素的大小设置为最小元素？（反向 IntrinsicWidth 或 IntrinsicHeight）
- python - CSV.writer 将每个集合条目放在一个新行上