允许用户双击表格文本以键入更改；数据库从这些更改中更新答案

【问题标题】：Enable user to double-click on table texts to type changes; DB is updated from these changes允许用户双击表格文本以键入更改；数据库从这些更改中更新
【发布时间】：2014-07-09 18:09:42
【问题描述】：

CDs.php 中的表数据是从数据库中提取的。单击表标题对列进行排序。现在，我希望当用户双击表格行中的某些内容以键入他们的更改时，此页面 (CDs.php) 是可编辑的。例如，用户可以双击“1999 Grammy Nominees”并将其更改为“2014 Grammy Winners”。网站上的此更改随后会更新数据库中的标题。我不确定如何执行此操作...关于我应该如何处理的任何想法/建议？提前致谢。

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

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

注意：我的表格列可以从 --> http://www.dougv.com/2009/06/13/sorting-your-mysql-results-set-in-php-using-jquery-and-a-more-traditional-approach/

排序

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Sortable Table Columns</title> 
        <link href="../demo.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
        <script type="text/javascript" src="jquery.tablesorter.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#sortedtable").tablesorter({ sortlist: [0,0] });
            });
        </script>
        <style type="text/css">
            #sortedtable thead th {
                color: #00f;
                font-weight: bold;
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
            <?php
            include("include.php"); 
            switch($_GET['c']) {
                case "1":
                    $col = "Title"; 
                    break;
                case "2":
                    $col = "Artist"; 
                    break;
                case "3":
                    $col = "Country"; 
                    break;
                case "4":
                    $col = "Company"; 
                    break;
                case "5":
                    $col = "Price"; 
                    break;                  
                default:
                    $col = "Year"; 
            }

            if($_GET['d'] == "1") {
                $dir = "DESC";
            }
            else {
                $dir = "ASC";
            }

            $dbc = mysql_connect($host, $user, $pass);
            if (!$dbc) {
                echo "Cannot connect to db server";
            }
            elseif(!mysql_select_db("database")) {
                echo "Cannot select database";
            }
            else { 
                if(!$rs = mysql_query("SELECT * FROM CD ORDER BY Title")) { 
                    echo "Cannot parse query";
                }
                elseif(mysql_num_rows($rs) == 0) {
                    echo "No records found";
                }
                else {                             
                    echo "<table id=\"sortedtable\" border='3' class=\"bordered\" cellspacing=\"0\">\n";
                    echo "<thead>\n<tr>";
                    echo "<th bgcolor='#FFFF00'>Title</th>"; 
                    echo "<th bgcolor='#FFFF00'>Artist</th>"; 
                    echo "<th bgcolor='#FFFF00'>Country</th>"; 
                    echo "<th bgcolor='#FFFF00'>Company</th>"; 
                    echo "<th bgcolor='#FFFF00'>Price</th>"; 
                    echo "<th bgcolor='#FFFF00'>Year</th>"; 
                    echo "</tr>\n</thead>\n";
                    while($row = mysql_fetch_array($rs)) {                  
                        echo 
                        "<tr>
                            <td>$row[Title]</td>
                            <td>$row[Artist]</td>
                            <td>$row[Country]</td>
                            <td>$row[Company]</td>
                            <td>$row[Price]</td>
                            <td>$row[Year]</td>
                        </tr>\n";
                    }
                    echo "</table><br />\n";
                }
            } 
        ?>     
    </body>
</html>

CDs.php

数据库：

【问题讨论】：

这些巨幅截图真的有必要吗？请张贴表达您的问题所需的最少数量。

标签： php jquery mysql contenteditable jeditable

【解决方案1】：

您可能想看看：Change Label to Textbox on edit hyperlink click

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

要检测更改，您可能希望检测用户何时按下回车键，因此我建议您看一下：Detect enter in input elements of a certain class 完成后，您可以将输入框转换回表格单元格并对 PHP 页面进行 ajax 调用，然后将值添加到数据库中。

访问此 jquery API 页面以了解有关 ajax 调用的更多信息：http://api.jquery.com/jquery.get/

【讨论】：

【解决方案2】：

您可以使用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>

【讨论】：