Skip to content Skip to sidebar Skip to footer
Home / Asp.net Mvc / C# / Javascript / Jquery

Delete Table Row Dynamically Using Jquery In Asp.net Mvc

Post a Comment
I have a table where I add and remove rows dynamically: @model AHBReports.Models.AdjustmentModel @using (Html.BeginForm()) { @Html.EditorF

Solution 1:

When the row you deleted it containts model's input and input has name and id based on index.

So when you delete row you have to update input's name and id that are in row after the deleted row.. or regenerate row next all from deleted row with new index name .

Replace your delete function with this one

functionremoveRow(selector) {
        if ($('#container tr').length > 1) {
            $(selector).closest('tr').remove();
            var itemIndex =0;
            $('#container tr').each(function(){
                var this_row = $(this);
                this_row.find('input[name$=".BRANCH"]').attr('name','Adjustments[' + itemIndex + '].BRANCH');//replace name of input that ends the name BRANCH
                this_row.find('input[name$=".Amount"]').attr('name','Adjustments[' + itemIndex + '].Amount');
                this_row.find('input[name$=".Id"]').attr('name', 'Adjustments[' + itemIndex + '].Id');
                itemIndex ++;
            });
        }
    }

Solution 2:

u can give the row an unique id.

var newItem = $("<trid='row"+itemIndex+"'>"+
            "<td><inputid='Adjustments_" + itemIndex + "__Id'type='hidden'value='"+itemIndex+"'class='iHidden'name='Adjustments[" + itemIndex + "].Id' /></td>" +
            "<td><inputtype='text'id='Adjustments_" + itemIndex + "__BRANCH'name='Adjustments[" + itemIndex + "].BRANCH'data-autocomplete-url='@Url.Action("GetBranches", "Report700H")'/></td>" +
            "<td><inputtype='text'id='Adjustments_" + itemIndex + "__Amount'name='Adjustments[" + itemIndex + "].Amount'/></td>" +
            "<td><aonclick='$('#row"+ itemIndex +").remove();'>x</a></td>" +
            "</tr>');

Actually this works fine for a smiliar page which i've created.

Greetings

Post a Comment for "Delete Table Row Dynamically Using Jquery In Asp.net Mvc"

Menu Halaman Statis