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

【问题标题】：How to edit the user information of the div using php?如何使用php编辑div的用户信息？
【发布时间】：2020-08-17 20:39:13
【问题描述】：

请看一下这个问题，我试图解释更多并添加了赏金：How to make the div editable to textarea and upload/delete existing images

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>

错误：它表示divName 的值未定义。如何将我的 php 中的 _name div 的值转换为 javascript？

另外，有没有更好的方法来编辑我的 div，所以用户可以像我上面解释的那样编辑名称和描述等信息？

【问题讨论】：

一些合理的代码缩进是个好主意。它可以帮助我们阅读代码，更重要的是它可以帮助您调试您自己的代码。为了您自己的利益，请快速查看coding standard。
@IncredibleHat 谢谢。我已经编辑了我的代码。
警告：您对SQL Injections 持开放态度，应该使用参数化的prepared statements，而不是手动构建查询。它们由PDO 或MySQLi 提供。永远不要相信任何形式的输入！即使您的查询仅由受信任的用户执行，you are still in risk of corrupting your data。 Escaping is not enough!

标签： javascript php html mysql reactjs

【解决方案1】：

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

您还可以在 textarea 处于可编辑或只读状态时将其附加到一些类，以更改背景、光标、字体... 为此使用element.classList.add('class') 和element.classList.remove('class')

【讨论】：