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

【问题标题】：Ajax function executes but output not showing in HTML tableAjax 函数执行但输出未显示在 HTML 表中
【发布时间】：2016-09-19 15:13:39
【问题描述】：

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

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

【问题讨论】：

标签： c# jquery asp.net ajax


【解决方案1】：

您正在通过在 ajax success 处理程序中调用 $("#divintable2").remove() 来删除 table 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>")
                    }



                }

【讨论】：

  • 现在它正在加载数据，但没有显示，当日码为空时我不需要隐藏表格。意味着当数据可用时，我需要显示 6 行的修复表，否则显示空表是必须显示..
  • 而且它没有加载到文本框中我无法编辑它。
  • 请更新您的问题并澄清 ajax 成功处理程序应该发生什么。从您的成功处理程序代码中，我认为您想删除 HTML 表，然后您尝试将 &lt;tr&gt; 再次附加回页面。
【解决方案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>");

            }

【讨论】：

  • @chetan sarode - 这有帮助吗？
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-01-30
  • 1970-01-01
  • 2019-04-17
  • 1970-01-01
  • 1970-01-01
  • 2020-05-18
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode