Php 允许用户双击表格文本进行类型更改；数据库将根据这些更改进行更新_Php_Jquery_Mysql_Contenteditable_Jeditable

Php 允许用户双击表格文本进行类型更改；数据库将根据这些更改进行更新

php jquery mysql

Php 允许用户双击表格文本进行类型更改；数据库将根据这些更改进行更新,php,jquery,mysql,contenteditable,jeditable,Php,Jquery,Mysql,Contenteditable,Jeditable,CDs.php中的表数据是从数据库中提取的。单击表格标题对列进行排序。现在，我希望当用户双击表行中的某些内容以键入更改时，这个页面CDs.php是可编辑的。例如，用户可以双击1999年格莱美提名者并将其更改为2014年格莱美获奖者。然后，站点上的此更改会更新数据库中的标题。我不知道该怎么做……我该怎么做有什么想法/建议吗？提前谢谢注意：我希望用户能够键入他们的更改…没有下拉选择选项或类似的东西注意：我只希望标题、艺术家和价格是可编辑的注意：我得到了要从中排序的表列-> 代码： CDs.ph

CDs.php中的表数据是从数据库中提取的。单击表格标题对列进行排序。现在，我希望当用户双击表行中的某些内容以键入更改时，这个页面CDs.php是可编辑的。例如，用户可以双击1999年格莱美提名者并将其更改为2014年格莱美获奖者。然后，站点上的此更改会更新数据库中的标题。我不知道该怎么做……我该怎么做有什么想法/建议吗？提前谢谢

注意：我希望用户能够键入他们的更改…没有下拉选择选项或类似的东西

注意：我只希望标题、艺术家和价格是可编辑的

注意：我得到了要从中排序的表列->

代码： CDs.php 数据库：

您可能想看看：

我知道这是一个标签，但它可以很容易地转换为您的情况。我个人会使用第二个答案中的更新1

要检测用户点击enter时可能需要检测的更改，因此我建议您查看以下内容：完成后，可以将输入框转换回表单元格，并对PHP页面进行ajax调用，然后将值添加到数据库中

访问此jQueryAPI页面以了解有关ajax调用的更多信息：

您可以使用contenteditable=true HTML属性，然后使用ajax将值发送给PHP。我举了一个简单的例子。它不完整，但回答了问题，它让你去实现它

<?php 
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    header('Content-Type: application/json');
    exit(json_encode(array(
        'result'=>'Received: '.$_POST['value'].' from AJAX, for row '.$_POST['row_id'].' column '.$_POST['column'],
    )));
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
jQuery(document).ready(function(){

    $.fn.editable = function(column){
        $(this).attr('contenteditable', true);

        $(this).blur(function () {
            var ajax = $.ajax({
                url: './',
                type: "POST",
                data: { row_id: $(this).parent().attr('id'), column:column, value: $(this).html()},
                dataType: "json"
            });
            ajax.done(function(data){
                $('#result').html(data.result);
            });

            $(this).attr('contenteditable', false);
        });
        return this;
    };
});
</script>
</head>

<body>

<div id="result"></div>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
  <tr id="row_id_1">
    <td width="33%" ondblclick="$(this).editable('col_a')">Value A</td>
    <td width="33%" ondblclick="$(this).editable('col_b')">Value B</td>
    <td width="34%" ondblclick="$(this).editable('col_c')">Value C</td>
  </tr>
</table>

</body>

</html>

这些巨大的屏幕截图真的有必要吗？请张贴传达您的问题所需的最低金额。

<?php 
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    header('Content-Type: application/json');
    exit(json_encode(array(
        'result'=>'Received: '.$_POST['value'].' from AJAX, for row '.$_POST['row_id'].' column '.$_POST['column'],
    )));
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
jQuery(document).ready(function(){

    $.fn.editable = function(column){
        $(this).attr('contenteditable', true);

        $(this).blur(function () {
            var ajax = $.ajax({
                url: './',
                type: "POST",
                data: { row_id: $(this).parent().attr('id'), column:column, value: $(this).html()},
                dataType: "json"
            });
            ajax.done(function(data){
                $('#result').html(data.result);
            });

            $(this).attr('contenteditable', false);
        });
        return this;
    };
});
</script>
</head>

<body>

<div id="result"></div>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
  <tr id="row_id_1">
    <td width="33%" ondblclick="$(this).editable('col_a')">Value A</td>
    <td width="33%" ondblclick="$(this).editable('col_b')">Value B</td>
    <td width="34%" ondblclick="$(this).editable('col_c')">Value C</td>
  </tr>
</table>

</body>

</html>