Javascript 将表格行编号替换为最后一个表格行旁边的编号

我通过onclick按钮添加行。在最后一行添加/追加行以及删除每一行方面，我没有任何问题。我的问题是，如何使行号始终位于最后一行

我的行添加代码：

var id_age;
function AddRow() {
    var rowCount = $('#dependent_table tbody tr').length;
        id_age = 'age_dependent_'+ rowCount;
        $("#dependent_table").append( "<tr>"+ "<td class='vert-align' style='width:45%;'><input type='text' class='form-control' name='name_dependent["+rowCount+"]' id='name_dependent_" + rowCount + "'></td>"+ "<td class='vert-align' style='width:10%;'><input type='text' class='form-control' name='age_dependent["+rowCount+"]' id='"+id_age+"' disabled></td>"+ "<td class='vert-align' style='width:35%;'><div class='col-md-12'><div class='form-group has-feedback' style='margin-top:12px;'><input class='form-control datePick' id='dob_dependent_"+ i +"' name='dob_dependent["+rowCount+"]' placeholder='YYYY-MM-DD' data-date-format='yyyy-mm-dd' type='text' onchange=\"CalculateAge(this.value,'" + id_age + "');\"/><i class='glyphicon glyphicon-calendar form-control-feedback'></i></div></div></td>"+ "<td class='vert-align' style='width:10%;'><button type='button' class='btn btn-danger btnDelete'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button></td>"+ "</tr>");
        rowCount++;
        $(".btnDelete").bind("click", Delete);
}

function Delete(){ 
    var par = $(this).parent().parent(); //tr 
    par.remove(); 
}

var-id\u-age；
函数AddRow（）{
var rowCount=$（'#依赖的_表tbody tr'）。长度；
id_age='age_dependent_'+行数；
$（“#依赖#表”）。追加（“+”+”+”+”）；
行计数++；
$（“.btnDelete”）.bind（“单击”，删除）；
}
函数Delete（）{
var PAR＝$（this）
PAR.Relver（）；
}

例如：

<tr id="dep_row_1">
    <td><input type="text" name="name_dependent[1]" value="value1"></td>
</tr>
<tr id="dep_row_2">
    <td><input type="text" name="name_dependent[2]" value="value2"></td>
</tr>
<tr id="dep_row_3">
    <td><input type="text" name="name_dependent[3]" value="value3"></td>
</tr>
<tr id="dep_row_4">
    <td><input type="text" name="name_dependent[4]" value="value4"></td>
</tr>

如果删除中间的一行：

<tr id="dep_row_3">
    <td><input type="text" name="name_dependent[3]" value="value3"></td>
</tr>

那么该表现在应该是：

<tr id="dep_row_1">
    <td><input type="text" name="name_dependent[1]" value="value1"></td>
</tr>
<tr id="dep_row_2">
    <td><input type="text" name="name_dependent[2]" value="value2"></td>
</tr>
<tr id="dep_row_3">
    <td><input type="text" name="name_dependent[3]" value="value4"></td>
</tr>

其中dep_row_4变为dep_row_3，依此类推

这可能吗

在我的当前代码中，当我总共有5行并且删除了第4行时，最后一行的id仍然是5，应该是4

非常感谢你的帮助

谢谢！ -Eli

可能是这样的（您将修改每行的属性，以删除行的“编号”开始）：

可能是这样的（您将修改每行的属性，从删除行的“number”开始）：

---

可能迭代其余的行（在删除的行之后）并将其数量减少1？

可能迭代其余的行（在删除的行之后）并将其数量减少1？

我认为您正在寻找迭代所有表行并更新name属性的代码。您可以使用函数和

for

循环执行此操作：

function updateNames() {
    var rows = $('#dependent_table tbody tr');
    var numOfRows = rows.length;
    var i;

    for (i=0; i<numOfRows; i++) {
        rows.eq(i).attr('name', 'name_dependent['+(i+1)+']');
    }
}

函数updateNames（）{
变量行=$（“#依赖#u表tbody tr”）；
var numorrows=rows.length；
var i；
对于（i=0；i我认为您正在寻找迭代所有表行并更新name属性的代码。您可以使用函数和
for
循环来完成此操作：

function updateNames() {
    var rows = $('#dependent_table tbody tr');
    var numOfRows = rows.length;
    var i;

    for (i=0; i<numOfRows; i++) {
        rows.eq(i).attr('name', 'name_dependent['+(i+1)+']');
    }
}

函数updateNames（）{
变量行=$（“#依赖#u表tbody tr”）；
var numorrows=rows.length；
var i；
对于（i=0；i您可以做的是获取当前行的id，选择后续行并使用jQuery的
nextAll
迭代它们，然后执行所需的更新

编辑：更新以包括AddRow逻辑和修复绑定问题


var-id\u-age；
函数AddRow（）{
var rowCount=$（'#依赖的_表tbody tr'）。长度；
id_age='age_dependent_'+行数；
$（“#依赖的_表tbody”）.append（“+”+”+“+”+”）；
$（“#dep_row"+rowCount+”.btnDelete”）.bind（“单击”，删除）；//仅将回调绑定到新创建的行的“删除”按钮
行计数++；
}
函数Delete（）{
var rowtodelet=$（this.parent（）.parent（）；
var currentId=parseInt（rowToDelete.attr（'id'）.split（'uu'）.pop（））；
var nextRow=$（'#dep_row'+（currentId+1））；//获取下一行
rowtodelet.remove（）；//删除当前行
如果（nextRow）{//如果还有一行
nextRow.attr（'id'，'dep_row_'+currentId）；//用旧的id替换该id
//检查每个输入并重命名
$（'input'，nextRow）.each（function（）{
var输入=$（此）；
var inputName=input.attr（'name'）.split（'['）[0]；
attr（'name'，inputName+'['+currentId+']'）；
});
++currentId；
//对子序列行执行相同的操作
console.dir（nextRow.nextAll（））；
nextRow.nextAll（）.each（函数（））{
var行=$（此）；
行属性（'id'，'dep_row_'+currentId）；
$（'input'，行）。每个（函数（）{
var输入=$（此）；
var inputName=input.attr（'name'）.split（'['）[0]；
attr（'name'，inputName+'['+currentId+']'）；
});
++currentId；
});
}
}
$（“#添加”）。在（'click'，AddRow）；

添加行
您可以做的是获取当前行的id，选择后续行，并使用jQuery的
nextAll
对其进行迭代，然后执行所需的更新

编辑：更新以包括AddRow逻辑和修复绑定问题


var-id\u-age；
函数AddRow（）{
var rowCount=$（'#依赖的_表tbody tr'）。长度；
id_age='age_dependent_'+行数；
$（“#依赖的_表tbody”）.append（“+”+”+“+”+”）；
$（“#dep_row"+rowCount+”.btnDelete”）.bind（“单击”，删除）；//仅将回调绑定到新创建的行的“删除”按钮
行计数++；
}
函数Delete（）{
var rowtodelet=$（this.parent（）.parent（）；
var currentId=parseInt（rowToDelete.attr（'id'）.split（'uu'）.pop（））；
var nextRow=$（'#dep_row'+（currentId+1））；//获取下一行
rowtodelet.remove（）；//删除当前行
如果（nextRow）{//如果还有一行
nextRow.attr（'id'，'dep_row_'+currentId）；//用旧的id替换该id
//检查每个输入并重命名
$（'input'，nextRow）.each（function（）{
var输入=$（此）；
var inputName=input.attr（'name'）.split（'['）[0]；
attr（'name'，inputName+'['+currentId+']'）；
});
++currentId；
//对子序列行执行相同的操作
console.dir（nextRow.nextAll（））；
nextRow.nextAll（）.each（函数（））{
var行=$（此）；
行属性（'id'，'dep_row_'+currentId）；
$（'input'，行）。每个（函数（）{
var输入=$（此）；
var inputName=input.attr（'name'）.split（'['）[0]；
attr（'name'，inputName+'['+currentId+']'）；
});
++currentId；
});
}
}
$（“#添加”）。在（'click'，AddRow）；

添加行
感谢@xorspark提供了这个精确的解决方案！我刚刚修改了输入id，使其与名称属性和其他部分相同，以适合我的代码。也感谢@anied！感谢大家的帮助！：）


var-id\u-age；
函数AddRow（）{