我有这个脚本,它有两个任务:
添加/删除动态输入框元素,我们称其为'input_box_a'。
在输入框中添加/删除一个值,我们称其为'input_box_b'
所以可以说有一个空的输入框,每当我单击添加时,它就会添加1,而当单击删除时,它会删除1。
现在,执行任务一,即添加/删除输入框,还向'input_box_b'添加和删除值。
[我的问题是,让我在任务上单击两次两次添加按钮,它将在'input_box_b'上放置3个值,当我使用任务1添加三个输入框时,它将添加3个附加值,总计现在为6,如果我在任务上单击两次删除按钮,三下,它将减去3个值。
我想要的是第四次单击任务二上的删除按钮时,我也想删除以前使用任务一添加的输入框。
这里是我对这段代码的参考,基本上就是它的作用,How to count dynamically added inputs?
https://plnkr.co/edit/jVi4AZBbWNE0qOzZIB8R?p=preview&preview
这里是脚本:
$(document).ready(function(e) {
var $input = $("#b_size");
var maxRows = 20;
var x = 1;
var html = '';
html += '<tr>';
html += '<td><input type="text" name="b_title[]" class="form-control"/></td>';
html += '<td><input type="number" name="b_page[]" class="form-control"/></td>';
html += '<td><input type="text" name="b_author[]" class="form-control"/></td>';
html += '<td><input type="text" name="b_publication[]" class="form-control"/></td>';
html += '<td><input type="text" name="b_type[]" class="form-control"/></td>';
html += '<td><input type="number" name="b_price[]" class="form-control"/></td>';
html += '<td><button type="button" id="remove" class="btn btn-danger">Remove</span> <
/button></td > < /tr> </div > ';
$input.val(0);
$(".alter").click(function() {
if ($(this).hasClass('plus_one'))
$input.val(parseInt($input.val()) + 1);
else if ($input.val() >= 1)
$input.val(parseInt($input.val()) - 1);
else if ($input.val() == 0) // This part
$("#b_table").on('change', function(e) { //is just
$(this).closest('tr').remove(); // what I assume
x--; // to be
}); // the solution
});
$("#add").click(function(e) {
if (x <= maxRows) {
$("#b_table").append(html);
x++;
$input.val(parseInt($input.val()) + 1);
}
});
$("#b_table").on('click', '#remove', function(e) {
$(this).closest('tr').remove();
x--;
$input.val(parseInt($input.val()) - 1);
});
});
这是任务一的HTML代码:
<table class="table table-bordered table-repsonsive" id="b_table">
<tr>
<th>Title</th>
<th>Page</th>
<th>Author</th>
<th>Publication</th>
<th>Type</th>
<th>Price</th>
<th><button type="button" id="add" class="btn btn-primary">Add</button></th>
</tr>
</table>
这是任务二的HTML代码:
<div class="input-group-append" role="group" >
<input type="text" class="form-control" name="b_size" id="b_size"/>
<button type="button" class="btn btn-primary alter plus_one"><i class="fas fa-plus"></i></button>
<button type="button" class="btn btn-danger alter minus_one"><i class="fas fa-minus"></i></button>
</div>
最后,这是正在进行的工作,可以帮助您可视化:
$(document).ready(function(e) {
var $input = $("#b_size");
var maxRows = 20;
var x = 1;
var html = '';
html += '<tr>';
html += '<td><input type="text" name="b_title[]" class="form-control"/></td>';
html += '<td><input type="number" name="b_page[]" class="form-control"/></td>';
html += '<td><input type="text" name="b_author[]" class="form-control"/></td>';
html += '<td><input type="text" name="b_publication[]" class="form-control"/></td>';
html += '<td><input type="text" name="b_type[]" class="form-control"/></td>';
html += '<td><input type="number" step=0.01 name="b_price[]" class="form-control"/></td>';
html += '<td><button type="button" id="remove" class="btn btn-danger">Remove</span></button></td></tr> </div>';
$input.val(0);
$(".alter").click(function() {
if ($(this).hasClass('plus_one'))
$input.val(parseInt($input.val()) + 1);
else if ($input.val() >= 1)
$input.val(parseInt($input.val()) - 1);
});
$("#add").click(function(e) {
if (x <= maxRows) {
$("#b_table").append(html);
x++;
$input.val(parseInt($input.val()) + 1);
}
});
$("#b_table").on('click', '#remove', function(e) {
$(this).closest('tr').remove();
x--;
$input.val(parseInt($input.val()) - 1);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>Number of Books</label>
<input type="text" id="b_size" />
<button type="button" class="alter plus_one">ADD</button>
<button type="button" class="alter minus_one">REMOVE</button>
</div>
<table id="b_table">
<tr>
<th>Title</th>
<th>Page</th>
<th>Author</th>
<th>Publication</th>
<th>Type</th>
<th>Price</th>
<th><button type="button" id="add" class="btn btn-primary">Add</button></th>
</tr>
</table>
递减计数器时,请检查它是否小于表中的行数。如果是,请删除最后一行。
$(document).ready(function(e) {
var $input = $("#b_size");
var maxRows = 20;
var x = 1;
var html = '';
html += '<tr>';
html += '<td><input type="text" name="b_title[]" class="form-control"/></td>';
html += '<td><input type="number" name="b_page[]" class="form-control"/></td>';
html += '<td><input type="text" name="b_author[]" class="form-control"/></td>';
html += '<td><input type="text" name="b_publication[]" class="form-control"/></td>';
html += '<td><input type="text" name="b_type[]" class="form-control"/></td>';
html += '<td><input type="number" step=0.01 name="b_price[]" class="form-control"/></td>';
html += '<td><button type="button" id="remove" class="btn btn-danger">Remove</span></button></td></tr> </div>';
$input.val(0);
$(".alter").click(function() {
if ($(this).hasClass('plus_one'))
$input.val(parseInt($input.val()) + 1);
else if ($input.val() >= 1) {
$input.val(parseInt($input.val()) - 1);
if ($input.val() < $("#b_table tr:has(input)").length) {
$("#b_table tr:has(input)").last().remove();
}
}
});
$("#add").click(function(e) {
if (x <= maxRows) {
$("#b_table").append(html);
x++;
$input.val(parseInt($input.val()) + 1);
}
});
$("#b_table").on('click', '#remove', function(e) {
$(this).closest('tr').remove();
x--;
$input.val(parseInt($input.val()) - 1);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>Number of Books</label>
<input type="text" id="b_size" />
<button type="button" class="alter plus_one">ADD</button>
<button type="button" class="alter minus_one">REMOVE</button>
</div>
<table id="b_table">
<tr>
<th>Title</th>
<th>Page</th>
<th>Author</th>
<th>Publication</th>
<th>Type</th>
<th>Price</th>
<th><button type="button" id="add" class="btn btn-primary">Add</button></th>
</tr>
</table>