Table multiple Add Row and Delete Row In jquery

 

 var ItemList = [];

    function GetSecurity_RosterShiftDetails() {

        

        var obj = {           

            RosteID: $('#dlRoster').val(),

            EmployeeID: $('#txtEmployeeID').val(),

            ShiftID: $('#dlShifts').val(),

            StartDate: $('#txtShiftStartDate').val()

        }

        //var PostList = PostList.substring(0, PostList.length - 1);

        $.ajax({

            type: "POST",

            url: '@Url.Action("GetSecurity_OTEmployee", "SecurityRoster")',

            dataType: "JSON",

            data: JSON.stringify({ "obj": obj }),

            contentType: "application/json;charset=utf-8",

            success: function (data) {

                if (data.length > 0) {

                    var item = "";

                    $.each(data, function (i, obj) {

                        var button = '<button class="" style="padding: 1px 10px;background:green;color:white;" onclick="ReplaceGuard(' + obj.RosterOTID + ',\'' + obj.EmployeeID + '\')">Replace</button>' +

                                  '<button class="" style="padding: 1px 10px;background:red;color:white;" onclick="Delete(' + obj.RosterOTID + ')">Del</button>';

                        if (obj.IsDeleted == 1) {

                            var button = '<span style="padding: 1px 10px;color:red;background:#f6fb66;font-weight:bold;">Deleted</span>' +

                                   '<a class="" style="padding: 1px 3px;font-weight:bold;cursor:pointer;"title="UNDO This Data." onclick="Undo(' + obj.RosterOTID + ')"><u>UNDO</u></a>';

                        }

                        var updatevalue = "";

                        if (obj.RosterOTID == "" || obj.RosterOTID == null) {

                            updatevalue = "SaveData()";

                        } else {

                            updatevalue = 'updateData(' + obj.RosterOTID + ')';

                        }

                        var exot = $("#Exot").val();

                        var maxlenth = "";

                        var readonly = "";

                        if (exot == "EX.OT") {

                            maxlenth = "";

                            readonly = "";

                        } else {

                            maxlenth = 'maxlength="2"';

                            readonly = "readonly";

                        }

                        var Dayoff = "";

                        if (obj.Dayoff == "" || obj.Dayoff == "") {

                            Dayoff = "";

                        } else {

                            Dayoff = "background-color:yellow;";

                        }

                        //alert(obj.EmployeeOT);

                        var newRow = '';

                        item += '<tr style="text-align:center;'+Dayoff+'">' +

                                '<td alt="RosterShiftDetailsID"  style="display:none;">' + obj.RosterShiftDetailsID + '</td>' +

                                  '<td alt="GuardListID"  style="display:none;">' + obj.GuardListID + '</td>' +

                                '<td style="width:12px;">' + (i + 1) + '</td>' +

                                '<td style="text-align:left;padding-left:10px;">' + obj.Shift + '</td>' +

                                '<td style="text-align:left;padding-left:10px;">' + obj.EmployeeName + '</td>' +

                                '<td>' + obj.EmployeeID + '</td>' +

                                '<td>' + obj.Designation + '</td>' +

                                 '<td style="width:150px;"><input  value="' + obj.ShiftName + '" id="txtShiftName_' + (i + 1) + '" type="text" style="width:100px;" list="dlShift" class="dlShift"/></td>' +

                                  '<td style="width:150px;"><input ' + maxlenth + '  value="' + obj.StartTime + '" id="txtStartTime" type="text" style="width:100px;"  class="txtStartTime"/></td>' +

                                  '<td style="width:150px;"><input ' + maxlenth + ' value="' + obj.EndTime + '" id="txtEndTiime" type="text" style="width:100px;"  class="txtEndTime"/></td>' +

                                '<td style="width:220px;"><input value="' + obj.PostName + '" id="txtPostName_' + (i + 1) + '" type="text" style="width:220px;" list="dlPostName" class="dlPostName"/></td>' +

                                   '<td style="width:75px;"><input ' + readonly + ' value="' + obj.Hours + '" id="txtHour" type="text" style="width:70px;background-color: aquamarine;"  class="txtHour"/></td>' +

                                   '<td><a onclick="OTinformationDetails(' + obj.GuardListID + ')" rel="">' + obj.EmployeeOT + '</a></td>' +

                                   '<td style="width:75px;"><button class="btn btn-success" type="button" onclick="' + updatevalue + '">Save</button></td>' +

                                    '<td  style="width:150px;">' + button + '</td>' +

                                    '<td  style="width:150px;display:none;">' + obj.RosterOTID + '</td>' +

                                    '<td style="' + newRow + '"><img src="../Images/Global/add-image.png" style="height:25px; width:25px" alt="Add Row" class="AddFRRow"/><img src="../Images/Global/delete-image.png" style="height:25px; width:25px" alt="delete Row" class="DelFRRow"/></td>' +

                                    

                              

                                '</tr>';

                    });

                    $("#tbodyShift").html(item);

                    console.log(ItemList);

                } else {

                    $("#tbodyShift").html('');

                }

            }

        });

    }

                                    

   $(document).on('click', '.AddFRRow', function () {

            var indx = $(this).closest('tr').index();

            var content = '<tr style="height:25px">' + $(this).closest('tr').html() + '</tr>';

            $('#tableShift tr:eq(' + (indx + 1) + ')').after(content);

            $tr = $(this).closest("tr").clone();

            $tr.insertAfter($(this).closest("tr"));

            $('#tableShift tr:eq(' + (indx + 2) + ')').addClass('gridclick');

        });

       $(document).on('click', '.DelFRRow', function () {

           var id = $(this).closest('tr').children('td:eq(29)').text();

            FRRowID = $(this).closest('tr').children('td:eq(29)').text();

           //$(this).closest('tr').remove();

           if (id == '0' || id == 'X') {

               $(this).closest('tr').remove();

               //ShowCustomDialog('Row Deleted.', 'Fast React');

           }

           else {

              //btnID = 'FRDelete';

             //msg = 'Are you sure want to Delete this Color From FastReact ?';

                //OpenConfirmDialog();

                Show_Alert('You Can Not Delete Saved Info From FastReact.', 'W');

        }

        });

        

    });