编辑php表上的链接

Question

我有一个表，其中的值来自数据库。我需要将编辑链接合并到表中。其中，如果用户单击“编辑”，则来自数据库的值将被放在用户可以编辑它的文本框中，然后保存到数据库。它在我的第一行值上起作用，但在随后的行中不起作用。请帮助

$(document).ready(function() {
  $(".loginDetails").click(function(e) {
    var input = $("<input>", {
      val: $(this).text(),
      type: "text"
    });
    $(this).replaceWith(input);
  });

  $("#edit-record").click(function(e) {
    e.preventDefault();
    $("span.loginDetails").trigger("click");
  });
});

$sql = "SELECT * FROM details"; 
$queryres = mysqli_query($conn,$sql); 

while ($rowwaf = mysqli_fetch_assoc($queryres)) { 
echo "<form action=\ "update.php\" method=\ "POST\">\n"; 
echo "<td><span class=\ "loginDetails\"> ".$rowwaf["name"]." </span><a href=\ "#\" id=\ "edit-record\"> Edit </a></td>\n" ; 
echo "<td>".$rowwaf["address"]."</td>\n" ; 
echo "</form>\n" ; 
}

Answer 1

1. 您可以通过类而不是id进行edit按钮调用，因为id在整个文档中都是唯一的。这就是为什么它在第一行元素上起作用的原因。
2. 在编辑时，单击像td一样通过父级$(this).closest('td').定位跨度>

代码

$(document).ready(function() {
  $(".loginDetails").click(function(e) {
    var input = $("<input>", {
      val: $(this).text(),
      type: "text"
    });
    $(this).replaceWith(input);
  });

  $(".edit-record").click(function(e) {
    e.preventDefault();
    $(this).closest('td').find("span.loginDetails").trigger("click");
  });
});

Answer 2

您在这里做错了，您在编辑超链接中使用了ID，必须将其更改为类。像这样：