CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Muhammad Nasir
Muhammad Nasir

Reputation: 2204

Dynamic id does not work after removing row from table

I have a table with feeSetting id.It contain dynamic data , I can add and remove remove rows to table. I generated ids dynamically that work fine until user remove a rows and add again new row it override the unique id of last row. I want table to generate unique id with dynamic add and remove functionality . My code for adding row is as follow. 

<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>

Upvotes: 2

Views: 71

Answers (1)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try using one global variable which will increment its value on addition of each new row, see below code

<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>

Upvotes: 3

Related Questions