Ajax function executes but the output does not appear in the HTML table

I am trying to load the records from database through id,but when the function executes it load the data in array but not display in table.it not showing any error also not in browser console.i am also use the debugger and check the line by line,but it doesn't shows any error. How to solve. Thanks in Advance. i need to perform edit on that data i am using the html table with 10 column and 6 rows with 8 cell of table is textbox and 2 are dropdown when records retrieve from database according to daycode it must be load in that textbox in that table for edit,hence i declare the 6 tbody with textboxes. Code:

<table role="grid" class=" div boder" id="divintable2">
    <thead role="row" >
        <tr>
            <th style="text-align:center;width:22%" aria-controls="divintable2">A/c Description</th>
            <th style="text-align:center;width:15%" aria-controls="divintable2">Field Name-1</th>
            <th style="text-align:center; width:15%" aria-controls="divintable2">Field Name-2</th>
            <th style="text-align:center; width:12%" aria-controls="divintable2">Type</th>
            <th style="text-align:center; width:12%" aria-controls="divintable2">Calc.Method</th>
            <th style="text-align:center;"  aria-controls="divintable2"></th>
            <th style="text-align:center; " aria-controls="divintable2">Link</th>
            <th style="text-align:center;" aria-controls="divintable2">A/c</th>
            <th style="text-align:center; " aria-controls="divintable2">%</th>
            <th style="text-align:center; " aria-controls="divintable2"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <asp:TextBox ID="a11" runat="server" class="form-control input-sm" style="width: 150px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="b11" runat="server" class="form-control input-sm" style="width: 100px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="c11" runat="server" class="form-control input-sm" style="width: 100px"></asp:TextBox>
            </td>
            <td>
                <asp:DropDownList ID="d11" runat="server" style="width:90px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="D">Discount</asp:ListItem>
                    <asp:ListItem Value="T">Tax</asp:ListItem>
                    <asp:ListItem Value="O">Others</asp:ListItem>
                    <asp:ListItem Value="S">SubTotal</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:DropDownList ID="e11" runat="server" style="width:90px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="N">Normal</asp:ListItem>
                    <asp:ListItem Value="P">Percentage</asp:ListItem>
                    <asp:ListItem Value="D">Discount</asp:ListItem>
                    <asp:ListItem Value="S">Summary</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:TextBox ID="f11" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:DropDownList ID="g11" runat="server" style="width:30px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="Y">Y</asp:ListItem>
                    <asp:ListItem Value="N">N</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:TextBox ID="h11" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="i11" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="j11" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>
                <asp:TextBox ID="a22" runat="server" class="form-control input-sm" style="width: 150px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="b22" runat="server" class="form-control input-sm" style="width: 100px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="c22" runat="server" class="form-control input-sm" style="width: 100px"></asp:TextBox>
            </td>
            <td>
                <asp:DropDownList ID="d22" runat="server" style="width:90px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="D">Discount</asp:ListItem>
                    <asp:ListItem Value="T">Tax</asp:ListItem>
                    <asp:ListItem Value="O">Others</asp:ListItem>
                    <asp:ListItem Value="S">SubTotal</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:DropDownList ID="e22" runat="server" style="width:90px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="N">Normal</asp:ListItem>
                    <asp:ListItem Value="P">Percentage</asp:ListItem>
                    <asp:ListItem Value="D">Discount</asp:ListItem>
                    <asp:ListItem Value="S">Summary</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:TextBox ID="f22" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:DropDownList ID="g22" runat="server" style="width:30px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="Y">Y</asp:ListItem>
                    <asp:ListItem Value="N">N</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:TextBox ID="h22" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="i22" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="j22" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>
                <asp:TextBox ID="a33" runat="server" class="form-control input-sm" style="width: 150px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="b33" runat="server" class="form-control input-sm" style="width: 100px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="c33" runat="server" class="form-control input-sm" style="width: 100px"></asp:TextBox>
            </td>
            <td>
                <asp:DropDownList ID="d33" runat="server" style="width:80px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="D">Discount</asp:ListItem>
                    <asp:ListItem Value="T">Tax</asp:ListItem>
                    <asp:ListItem Value="O">Others</asp:ListItem>
                    <asp:ListItem Value="S">SubTotal</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:DropDownList ID="e33" runat="server" style="width:80px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="N">Normal</asp:ListItem>
                    <asp:ListItem Value="P">Percentage</asp:ListItem>
                    <asp:ListItem Value="D">Discount</asp:ListItem>
                    <asp:ListItem Value="S">Summary</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:TextBox ID="f33" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:DropDownList ID="g33" runat="server" style="width:30px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="Y">Y</asp:ListItem>
                    <asp:ListItem Value="N">N</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:TextBox ID="h33" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="i33" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="j33" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>
                <asp:TextBox ID="a44" runat="server" class="form-control input-sm" style="width: 150px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="b44" runat="server" class="form-control input-sm" style="width: 100px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="c44" runat="server" class="form-control input-sm" style="width: 100px"></asp:TextBox>
            </td>
            <td>
                <asp:DropDownList ID="d44" runat="server" style="width:80px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="D">Discount</asp:ListItem>
                    <asp:ListItem Value="T">Tax</asp:ListItem>
                    <asp:ListItem Value="O">Others</asp:ListItem>
                    <asp:ListItem Value="S">SubTotal</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:DropDownList ID="e44" runat="server" style="width:80px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="N">Normal</asp:ListItem>
                    <asp:ListItem Value="P">Percentage</asp:ListItem>
                    <asp:ListItem Value="D">Discount</asp:ListItem>
                    <asp:ListItem Value="S">Summary</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:TextBox ID="f44" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:DropDownList ID="g44" runat="server" style="width:30px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="Y">Y</asp:ListItem>
                    <asp:ListItem Value="N">N</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:TextBox ID="h44" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="i44" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="j44" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>
                <asp:TextBox ID="a55" runat="server" class="form-control input-sm" style="width: 150px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="b55" runat="server" class="form-control input-sm" style="width: 100px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="c55" runat="server" class="form-control input-sm" style="width: 100px"></asp:TextBox>
            </td>
            <td>
                <asp:DropDownList ID="d55" runat="server" style="width:80px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="D">Discount</asp:ListItem>
                    <asp:ListItem Value="T">Tax</asp:ListItem>
                    <asp:ListItem Value="O">Others</asp:ListItem>
                    <asp:ListItem Value="S">SubTotal</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:DropDownList ID="e55" runat="server" style="width:80px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="N">Normal</asp:ListItem>
                    <asp:ListItem Value="P">Percentage</asp:ListItem>
                    <asp:ListItem Value="D">Discount</asp:ListItem>
                    <asp:ListItem Value="S">Summary</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:TextBox ID="TextBox1" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:DropDownList ID="g55" runat="server" style="width:30px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="Y">Y</asp:ListItem>
                    <asp:ListItem Value="N">N</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:TextBox ID="h55" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="i55" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="j55" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>
                <asp:TextBox ID="a66" runat="server" class="form-control input-sm" style="width: 150px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="b66" runat="server" class="form-control input-sm" style="width: 100px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="c66" runat="server" class="form-control input-sm" style="width: 100px"></asp:TextBox>
            </td>
            <td>
                <asp:DropDownList ID="d66" runat="server" style="width:80px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="D">Discount</asp:ListItem>
                    <asp:ListItem Value="T">Tax</asp:ListItem>
                    <asp:ListItem Value="O">Others</asp:ListItem>
                    <asp:ListItem Value="S">SubTotal</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:DropDownList ID="e66" runat="server" style="width:80px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="N">Normal</asp:ListItem>
                    <asp:ListItem Value="P">Percentage</asp:ListItem>
                    <asp:ListItem Value="D">Discount</asp:ListItem>
                    <asp:ListItem Value="S">Summary</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:TextBox ID="f66" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:DropDownList ID="g66" runat="server" style="width:30px" class="form-control input-sm">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem Value="Y">Y</asp:ListItem>
                    <asp:ListItem Value="N">N</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:TextBox ID="h66" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="i66" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="j66" runat="server" class="form-control input-sm" style="width: 30px"></asp:TextBox>
            </td>
        </tr>
    </tbody>
</table>

Ajax Function:

$(document).on("click", ".editButton", function() {
    $("#myModalEdit").focus();
    var id = $(this).attr("data-id");
    debugger;
    console.log(id);
    $("#btnUpdate").attr("edit-id", id);
    $.ajax({
        type: "Post",
        contentType: "application/json; charset=utf-8",
        url: "DaybookMast.aspx/GetData",
        data: JSON.stringify({
            daycode: "" + id + ""
        }),
        dataType: "json",
        success: function(data) {
            $("#divintable2").remove();
            for (var i = 0; i < data.d.length; i++) {
                $("#divintable2").append("<tr><td>" + data.d[i].Ledger + "</td><td>" + data.d[i].Datafld + "</td>" +
                    "<td>" + data.d[i].ADatafld + "</td>" + "<td>" + data.d[i].LType + "</td>" +
                    "<td>" + data.d[i].CType + "</td>" + "<td>" + data.d[i].LAcNo + "</td>" + "<td>" + data.d[i].Type + "</td>" +
                    "<td>" + data.d[i].Link + "</td>" + "<td>" + data.d[i].TPer + "</td>" + "<td>" + data.d[i].TCalc + "</td>" +
                    "</td></tr>")
            }

        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            debugger;
            alert("Error while retrieving data of :" + textStatus);
            alert("Error: " + XMLHttpRequest.responseText);
        }
    });

});
WebMethod: -[WebMethod]
public static DayBookDetails[] GetData(string daycode) {
    var details = new List < DayBookDetails > ();
    using(var scon = new SqlConnection(strConnection)) {
        var query = "select DayCode,Ledger,Datafld,ADatafld,LType,CType,LAcNo,Type,Link,TPer,TCalc from DayBookDetails where DayCode='" + daycode + "'";
        using(var cmd = new SqlCommand(query, scon)) {
            using(var sda = new SqlDataAdapter()) {
                cmd.Connection = scon;
                sda.SelectCommand = cmd;
                TableData.Clear();
                sda.Fill(TableData);
                details.AddRange(from DataRow dtrow in TableData.Rows select new DayBookDetails {
                    Ledger = dtrow["Ledger"].ToString(),
                        Datafld = dtrow["Datafld"].ToString(),
                        ADatafld = dtrow["ADatafld"].ToString(),
                        LType = dtrow["LType"].ToString(),
                        CType = dtrow["CType"].ToString(),
                        LAcNo = dtrow["LAcNo"].ToString(),
                        Type = dtrow["Type"].ToString(),
                        Link = dtrow["Link"].ToString(),
                        TPer = dtrow["TPer"].ToString(),
                        TCalc = dtrow["TCalc"].ToString()
                });

            }
        }
    }
    return details.ToArray();
}

You are removing the table DOM element by calling $("#divintable2").remove() in your ajax success handler. Instead of that try emptying only tbody and append data to it with following code:

success: function (data) {
                    $("#divintable2 tbody").empty();//empty the tbody
                    for(var i=0;i<data.d.length;i++)
                    {
                        $("#divintable2 tbody").append("<tr><td>" + data.d[i].Ledger + "</td><td>" + data.d[i].Datafld + "</td>" +
                    "<td>" + data.d[i].ADatafld + "</td>" + "<td>" + data.d[i].LType + "</td>" +
                    "<td>" + data.d[i].CType + "</td>" + "<td>" + data.d[i].LAcNo + "</td>" + "<td>" + data.d[i].Type + "</td>"
                    + "<td>" + data.d[i].Link + "</td>" + "<td>" + data.d[i].TPer + "</td>" + "<td>" + data.d[i].TCalc + "</td>" +
                    "</td></tr>")
                    }

                }

Related Articles