Question

我正在研究一个项目，我有一个问题。首先，让我向您介绍一些事情。

数据库 关于数据库结构的示例

ID    | NAME

1     | Daniel

2     | David

HTML / PHP脚本 页面本身的样子

<?php
$allUsers = mysqli_query($db,"SELECT * FROM users");

echo "<table class=\"table table-hover\" style=\"width: 100%;\">
  <thead>
    <tr>
      <th scope=\"col\">#</th>
      <th scope=\"col\">Username</th>
    </tr>
  </thead>
  <tbody>";

while($row = mysqli_fetch_array($allUsers))
{
echo "<tr>";
echo "<th class=\"inner\">" . $row['id'] . "</th>";
echo "<td>" . $row['username'] . "</td>";
echo "</tr>";
}
echo "
</tbody>
</table>";

?>

Javascript代码 此网站上的Javascript代码

    $(function () {
        $(".inner").dblclick(function (e) {
        if($(event.target).attr('class')!="thVal")
            {
                e.stopPropagation();
                var currentEle = $(this);
                var value = $(this).html();
                updateVal(currentEle, value);
        }
    });
});

function updateVal(currentEle, value) {
        $(document).off('click');
        $(currentEle).html('<input class="thVal" type="text" value="' + value +     
 '"                 
 />');
    $(".thVal").focus();
    $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {

            $(currentEle).html($(".thVal").val());
        }
    });

    $(document).click(function () {

            if($(event.target).attr('class')!="thVal")
            {
                $(currentEle).html($(".thVal").val());
                $(document).off('click');
            }

    });

}

现在我想问的第一件事：这似乎不适用于我的php页面。另一方面，在我的html页面上，我也尝试过它，它确实有效。我做错了什么？

当我们解决这个问题时，我怎么能确保当我的用户双击一个值并更改它时，它也会在数据库中更新。因此，例如，如果我的用户双击“David”值并将其设置为“Jeremy”，则数据库也将更新为Jeremy。

Answer 1

首先，您应该区分服务器脚本和客户端/浏览器脚本。 PHP是服务器脚本，当您运行此文件时，它将被编译为html文件。 Javascript / jquery是浏览器脚本，它只是在html文件上运行。
如果您希望我的用户双击某个值并更改它，那么它也会在数据库中更新。您应该在javascript / query中添加更多代码：

$(".thVal").keyup(function (event) {
  if (event.keyCode == 13) {
    $(currentEle).html($(".thVal").val());
    // add code here
    // submit the value to server to update database
  }
});

Answer 2

“这似乎不适用于我的php页面。在我的html页面上   另一方面，我也试过这个，它确实有效“

“如果我的用户双击”David“值并将其设置为   “Jeremy”，数据库也将更新给Jeremy。“

实际上这两个问题都与同一个问题有关。当你用JS改变你的价值时，你正在改变你的HTML（仅限前面），但是通过重新加载，你将获得你最初的价值......如果你想改变你的数据库，你必须使用AJAX作为Litvak。可能是这样的......

if (event.keyCode == 13) {
    var name = $(".thVal").val();
    var id = // you need to get the ID to be able to change your database at the right row
    $.ajax({
        type: 'POST',
        data: {
             id : id,
             name : name
        }
        url: 'changeName.php',
        dataType: 'html',
        success:function(data, text) {
             // If change in database worked, do this...
             $(currentEle).html(name);
        }
        error : function(request, status, error) {
             // There was a problem, couldn't change database, do this...
        }
    });

}

您的 changeName.php 将运行您的sql脚本以更改数据库......

function changeName($id, $name) {
    // make your checks here and your sql call
}

changeName($_POST['id'], $_POST['name']);

双击js

2 个答案: