javascript - ajax 响应数据未显示在 Jquery 模态内的 html 表上

Question

当我单击打开模态并调用 ajax 方法的链接时，我有一个链接。它正在打开模态并调用 ajax 方法并获取响应数据，但不显示来自 ajax 响应的数据我的模态在表中。我尝试了很多方法，但它不起作用。现在我修复了语法错误，请有人帮助我。提前谢谢。

HTML 代码

function Showdata() {
    $("#showdata").dialog({
        autoOpen: false,
        modal: true,
        title: 'table',
        width: '1190',
        height: '630',
        buttons: {
            Cancel: function() {
                $(this).dialog("close");
            }
        },
    }).dialog('open');
    return false;
}

var response=[{
    "mtrl_id": "1",
    "mtrl_name": "Iron Sticks",
    "mtrl_uom": "150",
    "mtrl_price": "1700",
    "mtrl_slno": "iron15",
    "mtrl_maxstk": "1700",
    "mtrl_crtstk": "160",
    "mtrl_stkonorder": "190",
    "mtrl_insertat": "2018-02-20 15:18:44.000000",
    "mtrl_updt": "2018-02-22 10:24:59.000000"
}, {
    "mtrl_id": "5",
    "mtrl_name": "Cement Bags",
    "mtrl_uom": "1500",
    "mtrl_price": "6400",
    "mtrl_slno": "cm165",
    "mtrl_maxstk": "1400",
    "mtrl_crtstk": "120",
    "mtrl_stkonorder": "200",
    "mtrl_insertat": "2018-02-20 14:48:17.000000",
    "mtrl_updt": "2018-02-21 18:13:14.000000"
},  {
    "mtrl_id": "9",
    "mtrl_name": "Beans",
    "mtrl_uom": "15",
    "mtrl_price": "161",
    "mtrl_slno": "sls12",
    "mtrl_maxstk": "150",
    "mtrl_crtstk": "120",
    "mtrl_stkonorder": "116",
    "mtrl_insertat": "2018-02-21 17:43:01.000000",
    "mtrl_updt": "2018-02-21 18:22:40.000000"
}]


$(function(){
  $('#showdiv a').on('click',function(){
      $.ajax({
        data:response,
        success:function(response) {
           var dat=response;
           var tbody=$("#Mytbl tbody"),
          // var tbody =$("#mtrlform").find('#tablediv #Mytbl tbody'),
               prop = ["mtrl_name", "mtrl_uom","mtrl_maxstk","mtrl_crtstk"];
               $.each(dat, function(i, dat) {
                 var tr = $('<tr>');
                 $.each(prop, function(i, prop) {
                  $('<td>').html(dat[prop]).appendTo(tr);
                 });
                   $('<td>').html("<a class='editdata' onclick='OpeneditModal();'' href='"+dat["mtrl_id"]+"'><i class='fa fa-edit fa-2x'></i></a>").appendTo(tr);
                   $('<td>').html("<a class='removedata' href='"+dat["mtrl_id"]+"'><i class='fa fa-remove fa-2x'></i></a>").appendTo(tr);
               });
        }

    });

  });
});

 

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id ="showdiv" style="width:20%;float:right;">
            <div style="font-size:18px;"><a onclick="Showdata();" href="#">Show Details</a></div>
          </div>
          <div id="showdata" style="display:none;">
          <div id="tablediv" style="width:100%;margin-top:10px;" max-height="500px;" overflow="auto;">
    
          <table class="table table-striped table-bordered table-fixed" cellspacing="0" style="width:100%;padding-top:20px;" id="Mytbl">
          <thead>
            <tr>
            <th style="text-align:center;font-size:15px;">Name</th>
            <th style="text-align:center;font-size:15px;">UOM</th>
            <th style="text-align:center;font-size:15px;">Maxstock</th>
            <th style="text-align:center;font-size:15px;">Current Stock</th>
            <th style="text-align:center;font-size:15px;">Edit</th>
            <th style="text-align:center;font-size:15px;">Delete</th>
          </tr>
          </thead>
          <tbody>
    
          </tbody>
          </table> 
     </div>
</div>

Answer 1

检查一下您是否错过了tr.appendTo(tbody);，如果我使用了您的ajax，那么我将得到空值

function Showdata() {
    $("#showdata").dialog({
        autoOpen: false,
        modal: true,
        title: 'table',
        width: '1190',
        height: '630',
        buttons: {
            Cancel: function() {
                $(this).dialog("close");
            }
        },
    }).dialog('open');
    return false;
}

var response=[{
    "mtrl_id": "1",
    "mtrl_name": "Iron Sticks",
    "mtrl_uom": "150",
    "mtrl_price": "1700",
    "mtrl_slno": "iron15",
    "mtrl_maxstk": "1700",
    "mtrl_crtstk": "160",
    "mtrl_stkonorder": "190",
    "mtrl_insertat": "2018-02-20 15:18:44.000000",
    "mtrl_updt": "2018-02-22 10:24:59.000000"
}, {
    "mtrl_id": "5",
    "mtrl_name": "Cement Bags",
    "mtrl_uom": "1500",
    "mtrl_price": "6400",
    "mtrl_slno": "cm165",
    "mtrl_maxstk": "1400",
    "mtrl_crtstk": "120",
    "mtrl_stkonorder": "200",
    "mtrl_insertat": "2018-02-20 14:48:17.000000",
    "mtrl_updt": "2018-02-21 18:13:14.000000"
},  {
    "mtrl_id": "9",
    "mtrl_name": "Beans",
    "mtrl_uom": "15",
    "mtrl_price": "161",
    "mtrl_slno": "sls12",
    "mtrl_maxstk": "150",
    "mtrl_crtstk": "120",
    "mtrl_stkonorder": "116",
    "mtrl_insertat": "2018-02-21 17:43:01.000000",
    "mtrl_updt": "2018-02-21 18:22:40.000000"
}]


$(function(){
  $('#showdiv a').on('click',function(){    
       
           var dat=response;
           var tbody=$("#Mytbl tbody"),
          // var tbody =$("#mtrlform").find('#tablediv #Mytbl tbody'),
   prop = ["mtrl_name", "mtrl_uom","mtrl_maxstk","mtrl_crtstk"];
               $.each(dat, function(i, dat) {
                
                 var tr = $('<tr>');
                 $.each(prop, function(i, prop) {    
                  $('<td>').html(dat[prop]).appendTo(tr);
                  tr.appendTo(tbody);
            });
                   $('<td>').html("<a class='editdata' onclick='OpeneditModal();'' href='"+dat["mtrl_id"]+"'><i class='fa fa-edit fa-2x'></i></a>").appendTo(tr);
                   $('<td>').html("<a class='removedata' href='"+dat["mtrl_id"]+"'><i class='fa fa-remove fa-2x'></i></a>").appendTo(tr);
               });     

  });
});

td{
text-align:center;
}


  

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id ="showdiv" style="width:20%;float:right;">
            <div style="font-size:18px;"><a onclick="Showdata();" href="#">Show Details</a></div>
          </div>
          <div id="showdata" style="display:none;">
          <div id="tablediv" style="width:100%;margin-top:10px;" max-height="500px;" overflow="auto;">
    
          <table class="table table-striped table-bordered table-fixed" cellspacing="0" border="1" style="width:100%;margin-top:50px;" id="Mytbl">
          <thead>
            <tr>
            <th style="text-align:center;font-size:15px;">Name</th>
            <th style="text-align:center;font-size:15px;">UOM</th>
            <th style="text-align:center;font-size:15px;">Maxstock</th>
            <th style="text-align:center;font-size:15px;">Current Stock</th>
            <th style="text-align:center;font-size:15px;">Edit</th>
            <th style="text-align:center;font-size:15px;">Delete</th>
          </tr>
          </thead>
          <tbody>
    
          </tbody>
          </table> 
     </div>
</div>