Javascript 如何使用php编辑div的用户信息？

请看一看这个问题，我试图解释更多，并补充了悬赏：

UPDATED:

我的问题太宽泛了，所以我更新了它，只问了一部分（如果您愿意，您可以单击编辑查看我的问题），我有一个包含一些html div的php代码。我想将那些html div（在循环中）的值传递给javascript。 我的代码基本上是获取用户详细信息。例如，用户在网站上输入了一些信息，如名称和描述，这些信息存储在mysql中，我获取这些信息并在网站上显示。现在我想让这些信息是可编辑的，所以如果用户点击编辑按钮，div就会变成textarea，用户应该能够编辑该文本，然后点击保存按钮来保存它（所以它会在mysql上更新），并在网站上显示新的信息。“删除”按钮可用于删除它

我的代码：

<?php
 
require "database.php";

session_start();

global $username;
$username = $_SESSION['userUsername'].$_SESSION['userId'];


function listFolderFiles($username){


    $username = $_SESSION['userUsername'].$_SESSION['userId'];
    
    $sql = "SELECT * FROM `_desc` WHERE `username` = '$username' AND `id` = '$string_arr[2]';";
    
    $result = mysqli_query($conn, $sql);
    $resultCheck = mysqli_num_rows($result);
    

    if($resultCheck > 0) {
        echo '</br>';
    
        while($row = mysqli_fetch_assoc($result) ) {
       
            echo '<div class="grid">' . '<h2>' .  $row["_name"] . '</h2>' . '</div>';
          
            echo '<div class="grid2">' . '<p>' .  $row["_desc"] . '</p>' . '</div>';
          
            echo '<hr/>';
            
        }

    echo '<button onClick="editName()" class="btn btn-info"> Edit</button>';
    echo '<a href="deleteUserInfo.php?edit= '. $row["id"].'"class="btn btn-danger ">Delete</a>';

    }
    echo '</div>';
}
listFolderFiles($username);

   
<script>

function editName() {
    console.log("calling");
    var divName = $("grid").html();
    console.log(divName);
    var editableName = $("<textarea />");
    editableName.val(divName);
    $("grid").replaceWith(editableName);
    editableName.focus();
    editableName.blur(saveName);

}

function saveName() {
    var htmlName = $(editableName).html();
    var viewableText = $("<div>");
    viewableText.html(htmlName);
    $(editableName).replaceWith(viewableText);

    $(viewableText).click(editName);
}
</script>

</body>

---

正如我从您的代码中得出的结论，当单击编辑按钮时，为了更改文本，您正在从div元素切换到textarea。
我有一个更简单的解决方案，就是在textarea上使用readonly属性。
默认情况下，您可以在文本区域中附加只读属性，然后单击编辑按钮时，您可以使用
元素删除该属性。removeAttribute（'readonly'）
单击保存按钮后，您可以再次添加只读
元素。setAttribute（'readonly'，'readonly'）
，使用
元素获取textarea的内容。innerText
并将其处理到数据库中

当textarea处于可编辑或只读状态时，您还可以将一些类附加到textarea，以便更改例如背景、光标、字体。。。
为了使用
element.classList.add（'class'）
和
element.classList.remove（'class'）
一些合理的代码缩进将是一个好主意。它帮助我们阅读代码，更重要的是，它将帮助您调试自己的代码。为了您自己的利益，请快速浏览一篇文章。@难以置信，谢谢。我已经编辑了我的代码。警告：您完全可以使用参数化的预处理语句，而不是手动生成查询。它们由或提供。永远不要相信任何形式的输入！即使您的查询仅由受信任的用户执行。