jquery - 如何使用 jquery 删除输入数据?
问题描述
我正在尝试制作一个自动聚合数字并动态添加输入的应用程序。当我删除任何输入字段时,不会从总和中减去该数字。如何从我删除的条目中减去数字?感谢您的帮助。
var sayac = 1;
$(function() {
$('#ekle').click(function() {
sayac += 1;
$('#ekhizmetler tbody').append(
'<tr><th><strong></strong></th><td><input id="alan_" name="alanlar2[]' + '" type="text" class="form-control inst_amount" /></td><td><a href="#"class="delete btn btn-danger">Delete</a></td></tr>');
});
$('#ekhizmetler').on("click", ".delete", function(e) {
e.preventDefault();
$(this).closest("tr").remove();
})
});
function sumIt() {
var total = 0,
val;
$('.inst_amount').each(function() {
val = $(this).val();
val = isNaN(val) || $.trim(val) === "" ? 0 : parseFloat(val);
total += val;
});
$('#total_price').html(Math.round(total));
$('#total_amount').val(Math.round(total));
}
$(function() {
$("#add").on("click", function() {
$("#container input").last()
.before($("<input />").prop("class", "inst_amount").val(0))
.before("<br/>");
sumIt();
});
$(document).on('input', '.inst_amount', sumIt);
sumIt() // run when loading
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12">
<table id="ekhizmetler" class="table table-condensed">
<thead>
<tr>
<th>Sıra</th>
<th>Numbers</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<th><strong>1</strong></th>
<td><input id="alan_2" name="alanlar2[]" type="text" class="form-control inst_amount"></td>
<td><input id="total_amount" name="total_amount" type="text" class="form-control" value="0"></td>
<td><a href="#" class="delete btn btn-danger">Delete</a></td>
</tr>
</tbody>
<tfoot>
<td>
<p id="ekle"><a href="#ekle" class="btn btn-primary">» New Field </a></p>
</td>
</tfoot>
</table>
</div>
解决方案
就像单击按钮sumIt
时所做的那样,在执行删除时通过获取其值来减去总和。add
$('#ekhizmetler').on("click", ".delete", function(e) {
e.preventDefault();
curr_val = $(this).closest("tr").val(); # get value of box to be deleted
total_val = $("#total_amount").val(); # get total value
$("#total_amount").val(total_val-curr_val); # set new total
$(this).closest("tr").remove()
})
推荐阅读
- angular - 从 Observable Array of Objects 迭代 *ngFor 时如何修复 InvalidPipeArgument 错误
- javascript - 如何使用 JavaScript 语言在 Jmeter WebDriver Sampler 中设置 InternetExplorerOptions?
- apache - mod_jk 使用 Lucee 和 Apache 生成不正确的重定向查询字符串
- system-verilog - DPI-C 中 Struct 中的动态数组
- node.js - 使用 Node.js 从 txt 文件中读取坐标
- android - com.google.android.gms.internal.firebase-perf.zza 中缺少方法
- python - 当用户选择年级时,Django用正确的科目更新显示的内容
- angular - 调用 API 服务后 Angular 丢失值列表
- python - 与同一轴嵌套的热图python破折号
- sql - 无法从 xml 为任务 Azure Blob 下载任务创建任务。错误 0x80070057 参数正确