当尝试使用jQuery添加HTML表时，HREF显示为空

Question

我有一个HTML表，我正在使用php显示数据并添加编辑按钮，但是当尝试执行Inline添加和编辑数据时，请使用Ajax.ut ajax.ut ajax.ut使用jquery进行添加和更新。我正在尝试在添加或编辑记录后添加编辑按钮。数据显示罚款。但是编辑按钮没有显示。

  $(function(){
            $('.txtcbt a').click(function(){
            var cntname,designation,mobile,email,vndrid,id,cid;
              cid=$("#num").val();
              cntname =$("#namegr").val();
              designation=$("#designation").val();
              mobile=    $("#mobilegr").val();
              email=$("#maildgr").val();
              vndrid="<?php echo $selectid; ?>";
              if(cntname =="" || designation== "" || mobile=="" || email==""){
                alert("fields should not be empty");
              }else{
                $.ajax({
                  url : "insertgr.php",
                  type: "POST",
                  data: {
                      id:  cid,
                      name: cntname,
                      dgnation:designation,
                      mobileno:mobile,
                      emailid:email,
                      vid:vndrid
                  },
                  success:function(response) {
                    var dat = $.parseJSON(response);
                      var tbody = $('#cnttable tbody'),
             //this is the place where i trying to add href along with edit icon
                         props = ["vndr_cntname", "designation","vndr_cntmobile","vndr_cntmail", "<a href='vendor.php?contactid=id'><i class='fa fa-edit fa-2x'></i></a>"];
                         $.each(dat, function(i, dat) {
                           var tr = $('<tr>');
                           $.each(props, function(i, prop) {
                             $('<td>').html(dat[prop]).appendTo(tr);
                           });
                           tbody.append(tr);
                         });
                    $("#num").val("");
                    $('#namegr').val("");
                    $('#designation').val("");
                    $('#mobilegr').val("");
                    $('#maildgr').val("");
                  }
              });
              }
            });
          });

php

 <?php
   require ('Assests/connection/connection.php');
   error_reporting(0);
    if(!empty($_POST['cntid'])){
     $id = $_POST['cntid'];
    $data = showdata($id, $conn);
    echo $data;
   }
   if(!empty($_POST['id'])){
    $updatedData = edit($conn);
   echo $updatedData;
 }
   if(empty($_POST['id'])){
  $insertdData = insert($conn);
  echo $insertdData;
}

function insert($conn){
  if(!empty($_POST['name']) && !empty($_POST['dgnation']) && !empty($_POST['mobileno']) && !empty($_POST['emailid']) && !empty($_POST['vid'])){
       $name=$_POST['name'];
       $degination=$_POST['dgnation'];
       $mobile=$_POST['mobileno'];
       $email=$_POST['emailid'];
       $vndrid=$_POST['vid'];
       $query=mysqli_query($conn,"INSERT INTO `vndr_cntdtls`(`vndr_cntname`, `designation`, `vndr_cntmobile`, `vndr_cntmail`, `vndr_id`,`updatedat`) VALUES ('$name','$degination','$mobile','$email',$vndrid,now())");
       return showAllRecords($conn);
  }
}
function edit($conn){
   //print_r($conn);
  if(!empty($_POST['name']) && !empty($_POST['dgnation']) && !empty($_POST['mobileno']) && !empty($_POST['emailid']) && !empty($_POST['vid'])){
      $id=$_POST['id'];
       $name=$_POST['name'];
       $degination=$_POST['dgnation'];
       $mobile=$_POST['mobileno'];
       $email=$_POST['emailid'];
       $vndrid=$_POST['vid'];
       $update1=mysqli_query($conn,"UPDATE `vndr_cntdtls` SET `vndr_cntname`='$name',`designation`='$degination',`vndr_cntmobile`='$mobile',`vndr_cntmail`='$email',`updatedat`=now() WHERE id=$id")or die(mysqli_error($conn));
       return showAllRecords($conn);
  }
}
function showdata($id, $conn){
  $result=mysqli_query($conn,"SELECT `id`, `vndr_cntname`, `designation`, `vndr_cntmobile`, `vndr_cntmail`,`vndr_id` FROM `vndr_cntdtls` where  id=$id");
  $rowcount = mysqli_num_rows($result);
  if ($rowcount > 0) {
        $row = mysqli_fetch_array($result);
   }
return json_encode($row);
}
function showAllRecords($conn){
  $vndrid=$_POST['vid'];
  $result=mysqli_query($conn,"SELECT distinct `id`, `vndr_cntname`, `designation`, `vndr_cntmobile`, `vndr_cntmail`,`vndr_id`,`updatedat` FROM `vndr_cntdtls` where vndr_id=$vndrid  ORDER BY `updatedat` desc LIMIT 1");
  $rowcount = mysqli_num_rows($result);
  if ($rowcount > 0) {
  while ($row = mysqli_fetch_array($result)){
        $records[] = $row;
   }
 }
return json_encode($records);
}
?>

Answer 1

您正在使用 props 变量从JSON响应中检索命名属性，因此编辑按钮根本不会进入该变量（因为它不是属性的名称，是您要附加的元素的HTML）。

从 props 中删除它，以便您拥有此：

props = ["vndr_cntname", "designation","vndr_cntmobile","vndr_cntmail"];

现在修改您的代码，以便在每行其他单元格之后附加编辑按钮：

$.each(dat, function(i, dat) {
    var tr = $('<tr>');
    $.each(props, function(i, prop) {
        $('<td>').html(dat[prop]).appendTo(tr);
    });
    /* ADD THE EDIT BUTTON HERE INSTEAD */
    $('<td>').html("<a href='vendor.php?contactid=id'><i class='fa fa-edit fa-2x'></i></a>").appendTo(tr);
    tbody.append(tr);
});

我不确定您是否要更改编辑链接中的ID，但是如果您这样做，则可能需要将适当的属性添加为 ContactID ：

    $('<td>').html("<a href='vendor.php?contactid=" + dat["vndr_id"] + "'><i class='fa fa-edit fa-2x'></i></a>").appendTo(tr);