javascript - 从表中删除行后动态 ID 不起作用

Question

我有一个带有 feeSetting id 的表。它包含动态数据，我可以在表中添加和删除行。我动态生成的 id 工作正常，直到用户删除行并再次添加新行它覆盖最后一行的唯一 id。我希望表生成具有动态添加和删除功能的唯一 ID。我添加行的代码如下。

<tablen id="feeSetting ">
<tbody>
</tbody>
</table>

<script>
     function AddRow() {
            debugger;
            var index = 0;
            if ($("#feeSetting tbody tr").length > 0) {
                  index = $("#feeSetting tbody tr").length;

            }

            $("#feeSetting tbody").append("<tr class='gradeX'>"

                + "<td class='col-md-3'><input type='text'  value='' class='form-control validate[required,custom[number]] text-input txtFromDay' id='eFromDay'/></td>"
                + "<td class='col-md-3'><input type='text' class='form-control validate[required,custom[number],min[1]] text-input txtValue' value='' id='eValue-" + index + "'/></td>"
                + "<td class='col-md-4'>"
                + "<div id='loadTypes-" + index + "'  class='typeValidation'></div></td>"
                + "<td class='col-md-2'><input type='button' class='btn btn-danger btn-sm' value='  Remove '/></td>"
                + "</tr>");
            renderPartialInDiv('@Url.Action("GetValidationTypeDropDown", "FeeFineSetting")?strDDName=eValidationTypeList-' + index + '&intDDID=0&intValidationID=1', '#loadTypes-' + index);
            $('#eValidationTypeList-'+index).select2();
        };
</script>

Answer 1

尝试使用一个全局变量，它会在添加每一行时递增其值，请参见下面的代码

<tablen id="feeSetting ">
<tbody>
</tbody>
</table>

<script>
    //keep this variable outside function and use it as global variable.
     var index = 0;
     function AddRow() {
            debugger;
            index++;
            $("#feeSetting tbody").append("<tr class='gradeX'>"

                + "<td class='col-md-3'><input type='text'  value='' class='form-control validate[required,custom[number]] text-input txtFromDay' id='eFromDay'/></td>"
                + "<td class='col-md-3'><input type='text' class='form-control validate[required,custom[number],min[1]] text-input txtValue' value='' id='eValue-" + index + "'/></td>"
                + "<td class='col-md-4'>"
                + "<div id='loadTypes-" + index + "'  class='typeValidation'></div></td>"
                + "<td class='col-md-2'><input type='button' class='btn btn-danger btn-sm' value='  Remove '/></td>"
                + "</tr>");
            renderPartialInDiv('@Url.Action("GetValidationTypeDropDown", "FeeFineSetting")?strDDName=eValidationTypeList-' + index + '&intDDID=0&intValidationID=1', '#loadTypes-' + index);
            $('#eValidationTypeList-'+index).select2();
        };
</script>