Ajax函數執行但輸出不顯示在HTML表中

我試圖通過id從數據庫加載記錄，但是當函數執行它時加載數組中的數據但不顯示在table.it中不顯示任何錯誤也不在瀏覽器console.i也使用調試器並逐行檢查，但它不顯示任何錯誤。怎麼解決。提前致謝。我需要執行編輯該數據我使用的HTML表格10列和6行8表格的單元格是文本框和2下拉時，當記錄從數據庫檢索數據庫時，它必須加載在該表中的文本框編輯，因此我宣佈與文本框的6 tbody。代碼：Ajax函數執行但輸出不顯示在HTML表中

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

來源

2016-09-19 Chetan Sarode

的可能的複製後[阿賈克斯功能無法正常工作（HTTP：/ /stackoverflow.com/questions/39592576/ajax-function-not-working） – Liam

你在你的ajaxsuccess處理程序調用$("#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>") 
        } 



       }

來源

2016-09-19 06:14:43 vijayP

現在它的加載數據，但沒有顯示，並且當daycode爲空時我不需要隱藏表格。我需要用6顯示修復表格行數據可用時，它顯示在其他空表是必須顯示.. –

，也不加載文本框中，我無法編輯它。 –

請更新你的問題，並澄清在Ajax成功處理程序上應該發生什麼。從你的成功處理程序代碼中，我認爲你想刪除HTML表格，然後你試圖追加''再次回到頁面。 – vijayP

我覺得你像這樣

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

      }

來源

2016-09-19 06:36:39 snit80

@chetan sarode - 這有幫助嗎？ – snit80

不適用...... –

Ajax函數執行但輸出不顯示在HTML表中

回答

相關問題