0 
id  car         make          sales
 1  panamera    porsche       100 
 2  italia      ferrari       200
 3  volante     astonmartin   300
 4  avantador   lamborghini   400
 5  slk         mercedes      500

皆さん、私はデータベースにこの単純なテーブルを持っています。そして、このテーブルを while ループでエコーします。

<ul>
<?php  
$query = "SELECT * FROM inplace LIMIT 0, 6";    
$result = mysql_query($query) or die ('Query couldn\'t be executed');  
while ($row = mysql_fetch_assoc($result)) {
echo '<li class="editable" id="'.$row['id'].'">'.$row['car'].'</li>';
echo '<li class="editable2" id="'.$row['id'].'">'.$row['make'].'</li>'; 
}
?>
</ul>

アイデアは、jQuery インプレース エディターを使用してこのテーブルを更新することです。だからここにコードがあります -

$(document).ready(function() 
{
$(".editable").bind("dblclick", replaceHTML);
$(".editable2").bind("dblclick", replaceHTML2);
$(".btnSave, .btnDiscard").live("click", handler);

function handler()
    {

        if ($(this).hasClass("btnSave"))
            {

                var str = $(this).siblings("form").serialize();
                $.ajax({
                        type: "POST",
                        async: false,
                        url: "handler.php",
                        data: str,
                }); 

            }

    } 

function replaceHTML()
    {
        var buff = $(this).html()
        .replace(/"/g, "&quot;");
        $(this).addClass("noPad")
                .html("<form><input type=\"text\" name=\"car\" value=\"" + buff + "\" /> <input type=\"text\" name=\"buffer\" value=\"" + buff + "\" /><input type=\"text\" name=\"id\" value=\"" + $(this).attr("id") + "\" /></form><a href=\"#\" class=\"btnSave\">Save changes</a> <a href=\"#\" class=\"btnDiscard\">Discard changes</a>")
                .unbind('dblclick', replaceHTML);   


    }

    function replaceHTML2()
    {
        var buff = $(this).html()
        .replace(/"/g, "&quot;");
        $(this).addClass("noPad")
                .html("<form><input type=\"text\" name=\"make\" value=\"" + buff + "\" /> <input type=\"text\" name=\"buffer\" value=\"" + buff + "\" /><input type=\"text\" name=\"id\" value=\"" + $(this).attr("id") + "\" /></form><a href=\"#\" class=\"btnSave\">Save changes</a> <a href=\"#\" class=\"btnDiscard\">Discard changes</a>")
                .unbind('dblclick', replaceHTML);   


    }

}
);

これは、インターネットから入手したインプレース編集コードであり、コードを理解するためだけに基本レベルまで分解しました。更新クエリについて心配する必要はありません。「handler.php」にあります。ここでの問題は、列ごとに個別の関数を作成する必要があることです。この場合、「car」列を更新する別の関数、「make」列を更新する別の関数を作成する必要があります。これが正しい方法だとは思いません。なぜなら、ここには3つの列しかないからです。列が 10 から 15 ある場合はどうなりますか? 15個の関数を書くことが正しい方法だとは思いません。また、「$(this).html()」は 1 つのフォームの値のみを取ります。助けてください。

4

1 に答える 1

1

PHP スクリプトを変更して、次のような HTML を生成します。

<table>
<tbody>
    <tr data-id="1">
        <td data-col="car">panamera</td>
        <td data-col="make">porsche</td>
        <td data-col="sales">100</td>
    </tr>
</tbody>
</tbody>

id各 HTML テーブル行に対応するデータベース行の は、 each で指定されdata-idますtr。そして、それぞれtdが を使用して、対応する DB 列を指定しますdata-col。

これらの情報を使用して、データベースを更新する PHP スクリプトに十分な情報を返すことができます。したがって、基本的にセルがクリックされると、次を使用してその列名を取得できます。

$(this).data('col')

そして、次を使用してその行の ID を取得できます。

$(this).parent('tr').data('id')

次に、DB を更新する PHP ページにこれらを渡すことができます。

編集1：

ul/liの代わりに使用できますtable/tr/td。HTML5 スタイルの属性をサポートしていない古いバージョンの jQuery を使用している場合は、class=car, class=make, etc.代わりに使用することもできます。data-col='car', data-col='make', etc.data-

編集 2: 完全なソリューション

whileループを次のように変更します。

while ($row = mysql_fetch_assoc($result)) {
    echo '<li class="editable" data-id="'.$row['id'].'" data-col="car">'.$row['car'].'</li>';
    echo '<li class="editable" data-id="'.$row['id'].'" data-col="make">'.$row['make'].'</li>'; 
}

ご覧のとおり、データベースの行 ID をdata-idに、データベースの列名を に格納しますdata-col。

このセットアップでは、必要なハンドラーは 1 つだけです。

function replaceHTML()
{
    var rowId   = $(this).data('id');
    var colName = $(this).data('col');
    var buff = $(this).html().replace(/"/g, "&quot;"); // Are you sure you need this?
    $(this).addClass("noPad")
            .html("<form><input type=\"text\" name=\"" + colName + "\" value=\"" + buff + "\" /> <input type=\"text\" name=\"buffer\" value=\"" + buff + "\" /><input type=\"text\" name=\"id\" value=\"" + rowId + "\" /></form><a href=\"#\" class=\"btnSave\">Save changes</a> <a href=\"#\" class=\"btnDiscard\">Discard changes</a>")
            .unbind('dblclick', replaceHTML);   
}

$(".editable").bind("dblclick", replaceHTML);

最後に、常に読み取り可能なコードを書くようにしてください。お願いします！:)

編集 3: JSFiddle

このライブ ソリューションをご覧ください。列名と行 ID を取得する方法を示します。PHPスクリプトで動作するようにそれを採用するだけです。

于 2012-02-27T06:27:53.753 に答える