php - 尝试使用 jquery 添加 html 表时 href 显示为 null

Question

我里面有一个 HTML 表，我正在使用 php 显示数据并添加编辑按钮，但是当尝试使用 ajax 进行内联添加和编辑数据添加和更新时，我正在尝试添加编辑按钮。添加或编辑记录。数据显示正常。但编辑按钮未显示。这有什么问题。请提供任何帮助。提前致谢。

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