允许编辑文本动态 php 表

Question

我有一个通过 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>

我要做的是将带有 userStatus 的单元格更改为一个下拉字段，其中当前值作为起始值，另一个输入/输出值作为另一个值以供选择。

我还想将 userDesc 更改为 textarea，我想我知道如何做到这一点，但是当我尝试将其应用于动态表时，我在概念上遇到了问题。

我的想法是我可以使用 jquery/javascript 来获取可以围绕这两个单元格的 span 变量的 innerhtml，然后将 html 更改为包含当前文本的各种输入字段，从而允许用户编辑它们以更改那些价值观。

但是，对于此类问题，我该怎么做，我需要所有按钮的 onClick 事件，而且我不知道会有多少按钮，这取决于表中的行数。

这将导致数百行冗余代码，因此我认为必须有更好的方法。有谁知道有什么方法可以做到这一点？我发现了这个：http://stackoverflow.com/questions/16202723/how-to-edit-data-onclick，这与我想要的很接近，但这似乎是静态值，我希望能够对表中的任何行执行此操作。

Answer 1

在您的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>";             
}

所以，如您所见，我已将data-row 属性添加到<tr>，它应该获取数据库记录ID 的值。根据需要更改它 - 我假设它会被命名为“id”。此外，我将data-column 属性添加到<td>，它应该为我们识别每一列。这就是 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" ...，因为每当您处理动态内容时，您总是希望文档上的事件侦听器，而不是元素。为什么？因为如果您单击“编辑”按钮，它会消失并出现“保存”按钮，您现在将永远失去该事件侦听器。如果您要重新添加“编辑”按钮（例如，在成功保存之后），则该按钮需要再次添加事件侦听器。但是，当您将事件侦听器附加到 文档 时，您可以删除/添加所需的所有内容，它仍然可以工作。

Answer 2

您可以将“数据”属性添加到每个带有您要更新的用户 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
});