我必须提供一个用户可以添加和删除带有输入字段的行的功能。 问题是当删除一行或多行然后再次添加时，我还需要以正确的顺序（1、2、3等）在每行前面添加一个行索引（数字）。 我可以添加行，但我无法正确计数，因为如果我删除它们，则计数从4开始，但是我需要1，或者如果第二行被删除，那么我需要2而不是4。
到目前为止，我已经使用append（）做到了这一点，但是我还需要在每行的前面添加行cont。我有一个计数器，但是可以说我加了1行，它给出了数字1和2。如果我删除第二行并再次添加了另一行，那么现在的计数是1和3
请注意，“添加”按钮只是一个，与append（）分开；
<div id="append-component-row">
<div id="cargo-component-wrap-0" class="row cargo-component-wrap">
<div class="col-xl-1">
<div class="form-group">
<label for="example-text-input" class="control-label">Nr.</label>
<div class="input-group component-index">
1.
</div><!-- input-group -->
</div>
</div>
<div class="col-xl-1">
<div class="form-group">
<label for="example-text-input" class="control-label">PCS</label>
<div class="input-group" style="width:75%;">
<input id="component-pcs" name="component[0][pcs]" class="form-control component-pcs" type="text">
</div><!-- input-group -->
</div>
</div>
<div class="col-xl-1">
<div class="form-group">
<label class="control-label">Length</label>
<div class="input-group">
<input id="component-length-0" name="component[0][length]" class="form-control checklist-length" type="text">
</div><!-- input-group -->
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label">Width</label>
<div class="input-group">
<input id="component-width-0" name="component[0][width]" class="form-control checklist-width" type="text">
</div><!-- input-group -->
</div>
</div>
<div class="col-xl-1">
<div class="form-group">
<label class="control-label">Height</label>
<div class="input-group">
<input id="component-height-0" name="component[0][height]" class="form-control checklist-height" type="text">
</div><!-- input-group -->
</div>
</div>
<div class="col-xl-1">
<div class="form-group">
<label for="example-text-input" class="control-label">Weight</label>
<div class="input-group">
<input name="component[0][weight_kg]" class="form-control component-weight" type="text">
</div><!-- input-group -->
</div>
</div>
<div class="col-xl-1">
<div class="form-group">
<label for="example-text-input" class="control-label">Volume</label>
<div class="input-group">
<input id="cargo-component-volume-0" name="component[0][volume]" class="form-control checklist-volume" type="text">
</div><!-- input-group -->
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label for="example-text-input" class="control-label">Special cargo types</label>
<div class="input-group">
<input name="component[0][cargo_type_1]" class="form-control" type="text">
<input name="component[0][cargo_type_2]" class="form-control" type="text">
<input name="component[0][cargo_type_3]" class="form-control" type="text">
</div><!-- input-group -->
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label for="example-text-input" class="control-label">Add comment</label>
<div class="input-group">
<label class="checkbox-container">
<input name="component[0][add]" type="checkbox" class="add-to-comment" data-id="1." value="0">
<span class="checkmark"></span>
</label>
</div><!-- input-group -->
</div>
</div>
<div class="col-xl-1">
<div class="form-group text-center">
<i class="ion-trash-a remove-row"></i>
</div>
</div>
</div>
</div>
<div class="col-md-1">
<div class="form-group text-center">
<i id="add-to-component-row" class="ion-android-add add-row"></i>
</div>
</div>
<script>
var component_counter = 1;
$('#add-to-component-row').on('click', function(){
component_counter++;
$('#append-component-row').append(
' <div id="cargo-component-wrap-'+component_counter+'" class="row cargo-component-wrap">\n' +
' <div class="col-xl-1">\n' +
' <div class="form-group">\n' +
' <label for="example-text-input" class="control-label">Nr.</label>\n' +
' <div class="input-group">\n' +
'<input class="component-index" />\n' +
' .\n' +
' </div><!-- input-group -->\n' +
' </div>\n' +
' </div>\n' +
' <div class="col-xl-1">\n' +
' <div class="form-group">\n' +
' <label for="example-text-input" class="control-label">PCS</label>\n' +
' <div class="input-group" style="width:75%;">\n' +
' <input id="component-pcs'+component_counter+'" name="component['+component_counter+'][pcs]" class="form-control component-pcs" type="text">\n' +
' </div><!-- input-group -->\n' +
' </div>\n' +
' </div>\n' +
' <div class="col-xl-1">\n' +
' <div class="form-group">\n' +
' <label class="control-label">Length</label>\n' +
' <div class="input-group">\n' +
' <input id="component-length-'+component_counter+'" name="component['+component_counter+'][length]" class="form-control checklist-length" type="text">\n' +
' </div><!-- input-group -->\n' +
' </div>\n' +
' </div>\n' +
' <div class="col-md-1">\n' +
' <div class="form-group">\n' +
' <label class="control-label">Width</label>\n' +
' <div class="input-group">\n' +
' <input id="component-width-'+component_counter+'" name="component['+component_counter+'][width]" class="form-control checklist-width" type="text">\n' +
' </div><!-- input-group -->\n' +
' </div>\n' +
' </div>\n' +
' <div class="col-xl-1">\n' +
' <div class="form-group">\n' +
' <label class="control-label">Height</label>\n' +
' <div class="input-group">\n' +
' <input id="component-height-'+component_counter+'" name="component['+component_counter+'][height]" class="form-control checklist-height" type="text">\n' +
' </div><!-- input-group -->\n' +
' </div>\n' +
' </div>\n' +
' <div class="col-xl-1">\n' +
' <div class="form-group">\n' +
' <label for="example-text-input" class="control-label">Weight</label>\n' +
' <div class="input-group">\n' +
' <input name="component['+component_counter+'][weight_kg]" class="form-control component-weight" type="text">\n' +
' </div><!-- input-group -->\n' +
' </div>\n' +
' </div>\n' +
' <div class="col-xl-1">\n' +
' <div class="form-group">\n' +
' <label for="example-text-input" class="control-label">Volume</label>\n' +
' <div class="input-group">\n' +
' <input id="cargo-component-volume'+component_counter+'" name="component['+component_counter+'][volume]" class="form-control checklist-volume" type="text">\n' +
' </div><!-- input-group -->\n' +
' </div>\n' +
' </div>\n' +
' <div class="col-xl-2">\n' +
' <div class="form-group">\n' +
' <label for="example-text-input" class="control-label">Special cargo types</label>\n' +
' <div class="input-group">\n' +
' <input name="component['+component_counter+'][cargo_type_1]" class="form-control" type="text">\n' +
' <input name="component['+component_counter+'][cargo_type_2]" class="form-control" type="text">\n' +
' <input name="component['+component_counter+'][cargo_type_3]" class="form-control" type="text">\n' +
' </div><!-- input-group -->\n' +
' </div>\n' +
' </div>\n' +
' <div class="col-xl-2">\n' +
' <div class="form-group">\n' +
' <label for="example-text-input" class="control-label">Add comment</label>\n' +
' <div class="input-group">\n' +
' <label class="checkbox-container">\n' +
' <input name="component['+component_counter+'][add]" type="checkbox" class="add-to-comment" data-id="'+component_counter+'." value="0">\n' +
' <span class="checkmark"></span>\n' +
' </label>\n' +
' </div><!-- input-group -->\n' +
' </div>\n' +
' </div>\n' +
' <div class="col-xl-1">\n' +
' <div class="form-group text-center">\n' +
' <i class="ion-trash-a remove-row"></i>\n' +
' </div>\n' +
' </div>\n' +
' </div>'
);
</script>
因此，总的来说，我可以开始计数直到删除元素。 如果我有3行，我得到的计数为1. 2. 3.，但是如果我删除所有行并再次添加3行，我得到的计数为4. 5. 6。 但是我再次需要1. 2. 3。
答案 0 :(得分：1)
您需要覆盖所有行，而不是在添加/删除行时对其进行处理。
因此，我将创建一个对表中所有行进行重新编号的函数，在添加行或删除现有行时调用它。
没有看到您的代码，类似于以下内容……
$("#addrow").on("click", function(e) {
$(".mainbody").append($('<tr><td class="rownumber"></td><td>New</td><td class="removerow">Remove</td></tr>'));
renumberRows();
});
$(document).on("click", ".removerow", function(e) {
$(this).closest("tr").remove();
renumberRows();
});
function renumberRows() {
$(".mainbody > tr").each(function(i, v) {
$(this).find(".rownumber").text(i + 1);
});
}#addrow, .removerow {
cursor:pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody class="mainbody">
<tr>
<td class="rownumber">1</td>
<td>First</td>
<td class="removerow">Remove</td>
</tr>
<tr>
<td class="rownumber">2</td>
<td>Second</td>
<td class="removerow">Remove</td>
</tr>
<tr>
<td class="rownumber">3</td>
<td>Third</td>
<td class="removerow">Remove</td>
</tr>
</tbody>
</table>
<div id="addrow">Add</div>
答案 1 :(得分：1)
我要做的第一件事不是保留计数器，而是计算以前添加了多少行。为此，您可以将行包装在具有自己类的元素中。
$('#add-to-component-row').on('click', function(){
var count = $('#append-component-row div').length+1;
$('#append-component-row').append('<div class="row">'+count+'<input type="text"/> <i class="ion-trash-a remove-row"></i></div>')
});
$(document).on('click','.remove-row',function(){
$(this).closest(".row").remove();
}).remove-row:before{
content:'x'
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="append-component-row">
</div>
<button id="add-to-component-row">Add row</button>
但这只能部分解决问题，就像您删除中间的一行一样，您需要仔细检查并重新编号。为此，我建议您将数字放在其自己的元素中，并在删除任何行时重新索引：
$('#add-to-component-row').on('click', function(){
var count = $('#append-component-row div').length+1;
$('#append-component-row').append('<div class="row"><span class="row-number">'+count+'</span><input type="text"/> <i class="ion-trash-a remove-row"></i></div>')
});
$(document).on('click','.remove-row',function(){
$(this).closest(".row").remove();
$('#append-component-row div').each(function(i){
$('.row-number',this).html(i+1);
});
}).remove-row:before{
content:'x'
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="append-component-row">
</div>
<button id="add-to-component-row">Add row</button>