Javascript 允许编辑文本动态php表

我有一个通过PHP生成的html表和数据库中的数据，我想做的是在每一行的最后一个单元格中有一个按钮，上面写着“编辑”，当你点击该按钮时，其他单元格中的文本会变成文本框或其他类型的输入字段，这样你就可以编辑它们，然后按“提交”，这将发送表单，以便在数据库中更新。我现在生成表的代码是：

<table style="width:100%; " class = "table table-striped table-bordered table-hover">
  <tr>
     <th>Name</th>
     <th>Status</th>
     <th>Description</th>
     <?php 
        if($_SESSION['editGroup'] != 0){
           echo "<th>Edit</th>";
        }
     ?>
  </tr>
 <?php
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $checkQuery = "SELECT userGiven, userStatus, userDesc FROM user_Status WHERE organization = 'myOrg' ORDER BY userGiven ASC";
    $prepared = $dbh->prepare($checkQuery);
    $prepared->execute();
    $data = $prepared->fetchAll(PDO::FETCH_ASSOC);
    foreach($data as $row){
      echo "<tr>";
      if($_SESSION['editGroup'] != 0){
      echo "<td width='20%'>" . $row['userGiven'] . "</td><td width='10%'>" . $row['userStatus'] . "</td><td width='70%'>" . $row['userDesc'] . "</td><td width='10%'><button type='button' class='btn btn-info'>Edit</button></td>";
      }else{
         echo "<td width='20%'>" . $row['userGiven'] . "</td><td width='15%'>" . $row['userStatus'] . "</td><td width='75%'>" . $row['userDesc'] . "</td>";
      }
      echo "</tr>";             
    }
 ?>
</table>

名称
地位
描述
您可以使用要更新的用户id向每个按钮添加“数据”属性。例如：

<button data-iduser='<?= $use["id"] ?>' class='btn btn-info'>Edit</button>

$("btn btn-info").click( function() {
   var idUser = $(this).attr("data-iduser");
   // some ajax if you want with that iD
});

在
for
循环中，您需要在
和
元素中放置可识别的内容。我个人会使用数据属性。例如：

<button data-iduser='<?= $use["id"] ?>' class='btn btn-info'>Edit</button>

$("btn btn-info").click( function() {
   var idUser = $(this).attr("data-iduser");
   // some ajax if you want with that iD
});

回显行代码

foreach($data as $row){
  echo "<tr data-row='{$row[id]}'>";
  if($_SESSION['editGroup'] != 0){
     echo "<td width='20%' data-column='name'>" . $row['userGiven'] . "</td><td width='10%' data-column='status'>" . $row['userStatus'] . "</td><td width='70%' data-column='description'>" . $row['userDesc'] . "</td><td width='10%'><button type='button' class='btn btn-info'>Edit</button></td>";
  }else{
     echo "<td width='20%'>" . $row['userGiven'] . "</td><td width='15%'>" . $row['userStatus'] . "</td><td width='75%'>" . $row['userDesc'] . "</td>";
  }
  echo "</tr>";             
}

最后，我们需要定义点击save时会发生什么（上面的示例将“编辑”按钮更改为“保存”按钮）。这可能是任何东西，但我们假设它是一个AJAX调用：

前端事件侦听器：第2部分

$( function(){

    $(document).on("click", ".btn-info-save", function(){

        var parent = $(this).closest("tr");
        var id = $(parent).attr("data-row");
        var data = {id: id};

        $("[data-dc]").each( function(){
            var col = $(this).attr("data-dc");
            var val = $(this).val();

            data[col] = val;
        });

        $.ajax({
            url: "/dynamic-edit/edit.php", // Change this to your PHP update script!
            type: 'POST',
            dataType: 'json',
            data: data,
            success: function(ret){
                //Do Something
                console.log(ret.response);
               },
            error: function(ret){
                console.log(ret.response);
               }
        });

    });

}

现在，在处理AJAX请求的PHP脚本中：

edit.PHP的PHP代码

$name = $_POST['data_name'];
$status = $_POST['data_status'];
$description = $_POST['data_description'];

// Do whatever with the data

// Output JSON - get the response in JS with ret.response
// either inside the success or error portion of the AJAX
echo json_encode( ["response"=>"Row edited successfully."] );

这是一个非常简单的例子，但它能说明问题的关键。请确保将AJAX url从“/dynamic edit/edit.php”更改为在提交后实际进行更新的php脚本

您可能希望在成功编辑后进行清理；例如，将文本框更改回
中的文本。另外，请注意，我刚刚将它们更改为文本框。我知道你在你的帖子里说你想把状态设置为下拉列表，把描述设置为文本区域，但是这个例子应该很容易改变。我不知道下拉列表的值应该是什么，所以你必须做这部分

注释

我选择了
$（文档）。在（“单击”…
而不是
$（“.btn info”）。在（“单击”…
）上，因为每当处理动态内容时，您总是希望文档上有事件侦听器，而不是元素。为什么？因为如果单击“编辑”按钮，它会消失并显示“保存”按钮出现，您现在将永远失去该事件侦听器。如果您要重新添加“编辑”按钮（例如，在成功保存后），该按钮需要再次添加事件监听器。但是，当您将事件监听器附加到文档时，您可以删除/添加所有您想要的内容，它仍然可以工作。
那么，您只是在使用$use变量作为一种方式来显示我将在何处将其设置为我希望其等于的ID。为什么是数据iduser='这就像。在您自己的代码中，您应该编写Editmy$use[“id”]虽然会有所不同，但对吗？它将是我正确存储id的任何变量？是的，抱歉，这是一个示例。您应该使用存储用户id的var。我想在您的情况下，应该是类似于'$row[“id”]“？好的，这就是我正在做的，所以我只是在重复检查。目前我正在尝试让var idUser获取按钮上创建的新属性的值。我插入了一个警报（idUser）；创建该变量后，立即向我显示它的值，但现在它返回未定义的值，但该按钮的id确实存储在属性数据iduser中，这是一个加号。编辑：我弄明白了这一部分，我现在正在使用ajax将这些列更改为适当的字段，以便我可以编辑它们。谢谢，我理解了发生了什么，我想我一定能克服我遇到的任何小错误，感谢所有这些，我找到了一些类似于这种方法的教程，但它们都花费了钱，远远超过了我想要的，我真的希望这能起作用，而不必使用弹出模式。任何时候！我同意，内联编辑似乎都可以比模态更优雅（虽然模态对于特定用途来说很酷）。希望一切都能解决-如果遇到任何障碍，请告诉我！我现在唯一的小障碍是var parent=$（this.nearest（“tr”）；where.nearest（…）不是一个函数，我需要包含一个库还是一个文件？我可能想办法让它抓取tr，因为它附带了ID。Nate，如果你仍然检查这个，我对AJAX部分中的字段的.val（）有问题，我发送空白数据，因为所有3.val（）都是等于零，数据看起来像data_name:（空白）；data_status:（空白）；data_description:（空白）；我已经尝试了尽可能多的方法来纠正这个问题，但我仍然没有得到任何要传递的值。嘿@AndyPet74，让我看看它并调试一下。我打赌我在哪里有一个打字错误。