1

私は基本的にmySQLデータベース内に格納されているテーブルを編集する簡単な方法を使用しようとしていますが、別の編集ページを通過したくないので、私の理論は次のとおりです。

次のように、通常どおりHTMLテーブル内のすべてのデータを表示します。

<table class="table table-bordered sortable">
<thead>
        <tr>
                <th>Marchant</th>
                <th>URL</th>
                <th>Status</th>
                <th>Sold</th>
                <th>Deals</th>
                <th>Sites</th>
                <th>Found</th>
                <th>Seen</th>
        </tr>
</thead>

<tbody>
        <tr>
                <td>value</td>
                <td></td>
                <td></td>
                <td>Sold here</td>
                <td>Deals here</td>
                <td>Sites here</td>
                <td>null</td>
                <td>null</td>
        </tr>
</tbody>

表示された値をクリックして変更するだけで、その場でデータを編集できるようにしたいと思います。

問題は、これを行うことでどのように対処するかということですが、それも可能ですか？

4

2 に答える 2

5

jQuery を使用している場合は、その場で編集するプラグインをチェックしてください( jEditableは良いプラグインです)。

この背後にある考え方は、テーブル セルにクリック イベント リスナーを設定することです。このリスナーでは、TD のコンテンツを含む編集可能なテキストエリア/フォームを追加します。

変更または送信すると、データは ajax リクエストを介してサーバーに送信され、DB が更新され、最終的にサニタイズされたデータが返されます (TD コンテンツを更新します)。

于 2013-01-31T17:50:20.177 に答える
3

はい、可能です。

ほとんどがフロントエンドです。

セルをクリックした後に入力を作成する例を次に示します。（jQuery）

// once page is loaded
$(document).ready(function() {

    // adding an event when the user clicks on <td>
    $('td').click(function() {

        // create input for editing
        var editarea = document.createElement('input');
        editarea.setAttribute('type', 'text');

        // put current value in it
        editarea.setAttribute('value', $(this).html());

        // rewrite current value with edit area
        $(this).html(editarea);

        // set focus to newly created input
        $(editarea).focus();

    });

});

この後、新しく作成された入力にイベントを追加できます。（たとえば、ユーザーがEnterキーを押したとき）

次に、AJAXリクエストを実行し、新しい値を.phpスクリプトに送信します。

また、新しく作成された要素にidを追加して、データがAJAX経由で送信された後に変更する必要のあるセルを正確に把握する必要があります。

また、MySQLに配置する前にデータを検証することを忘れないでください。

したがって、すべてがうまくいったかどうかにかかわらず、値を返し、値に応じてJavaScriptコードを記述して、セルから要素を削除するか、編集した値を入力するか、メッセージをポップアップします。

お役に立てれば。

于 2013-01-31T18:28:19.177 に答える