Ajax函数执行但输出未显示在HTML表中

Question

我正在尝试通过id从数据库加载记录，但是当函数执行时，它将数据加载到数组中但不显示在table.it中也没有显示任何错误也不在浏览器控制台中。我也使用调试器和逐行检查，但不显示任何错误。怎么解决。提前致谢。 我需要对该数据执行编辑我正在使用带有10列和6行的html表，其中8个单元格的表格是文本框，2个是下拉列表，当根据日期代码从数据库中检索记录时，它必须加载到该表格中的该文本框中编辑，因此我声明了6个文本框。 代码：

<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功能：

$(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();
}

Answer 1

您要通过调用table $("#divintable2").remove()处理程序中的ajax来移除success DOM元素。而不是尝试仅清空tbody并使用以下代码将数据附加到其中：

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>")
                    }



                }

Answer 2

我认为你是在追求这样的事情

success: function (data) {
                $("#divintable2").append("<tbody>");
                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>")
                }

$("#divintable2").append("</tbody>");

            }