允许编辑Text动态php表

在for循环中，您需要在<tr>和<td>元素中放入可识别的内容。我个人会选择数据属性。例如：

回波行代码

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>";             
}

因此，正如您所看到的，我已经向<tr>添加了一个data-row属性，该属性应该获得数据库记录ID的值。根据需要对其进行更改-我假设它将命名为"ID"。此外，我在<td>中添加了data-column属性，它应该为我们识别每一列。这是PHP中需要的所有修改。

现在，下面是编辑按钮的JQuery的样子：

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

$( function(){
    $(document).on("click", ".btn-info", function(){
        var parent = $(this).closest("tr");
        var id = $(parent).attr("data-row");
        var name = $(parent).children("[data-column='name']");
        var status = $(parent).children("[data-column='status']");
        var desc = $(parent).children("[data-column='description']");
        var nameTxt = $(name).html();
        var statusTxt = $(status).html();
        var descTxt = $(desc).html();
        $(name).html("<input name='name' data-dc='name' value='" + nameTxt + "'>");
        $(status).html("<input name='status' data-dc='status' value='" + statusTxt + "'>");
        $(desc).html("<textarea name='desc' data-dc='description'>" + descTxt + "</textarea>");
        $(this).replaceWith("<button class='btn-info-save'>Save</button>");
    });
}

最后，我们需要定义点击保存时会发生什么（上面的例子将"编辑"按钮更改为"保存"按钮）。这可能是任何东西，但我们认为这将是一个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脚本的位置，该脚本将在提交后进行更新。

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

票据

我选择了$(document).on("click" ...而不是$(".btn-info").on("click" ...，因为无论何时处理动态内容，您总是希望文档上有事件侦听器，而不是元素。为什么？因为如果您单击"编辑"按钮，它将消失，并显示"保存"按钮，您现在将永远失去该事件侦听器。如果要重新添加"编辑"按钮（例如，在成功保存之后），则需要再次添加该按钮的事件侦听器。然而，当您将事件侦听器附加到文档时，您可以删除/添加您想要的所有内容，它仍然可以工作。

您可以使用要更新的用户id为每个按钮添加"data"属性。例如：

<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
});