jqueryは即時変更を実現します-フロントエンドQ&A-php.cn

jqueryは即時変更を実現します

王林

リリース： 2023-05-23 13:43:07

オリジナル

508 人が閲覧しました

インターネットの発展に伴い、Web ページの対話性と応答性がますます注目を集めています。インライン編集機能もさまざまなWebサイトで広く使われています。クリックして変更とは、ページ上のコンテンツを直接編集する機能を指します。つまり、新しいページにジャンプしたり、編集するためにフォームを使用したりする必要はなく、マウスをクリックするだけでページ上のコンテンツを直接編集できます。、非常に便利で速いです。

瞬時の変更を実現するプロセスにおいて、jQuery は非常に実用的なツールです。 jQuery は、DOM 操作、イベント処理、アニメーション効果などを簡単に実行できるさまざまな関数を提供する、高速かつ簡潔な JavaScript ライブラリです。以下では、jQuery を使用してポイントアンドクリックによる変更を実現する方法を紹介します。

まず、サンプルページを準備する必要があります。複数のテーブルを含むページがあり、それぞれに名前と年齢の値があるとします。ユーザーがこの情報をページ上で直接編集し、自動的にサーバーに保存できるようにしたいと考えています。以下は、サンプルページの HTML ソースコードです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>即点即改示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 5px;
            text-align: center;
        }
        th {
            background-color: #eee;
        }
        td.editable {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="editable" data-field="name" data-id="1">张三</td>
                <td class="editable" data-field="age" data-id="1">25</td>
            </tr>
            <tr>
                <td class="editable" data-field="name" data-id="2">李四</td>
                <td class="editable" data-field="age" data-id="2">30</td>
            </tr>
            <tr>
                <td class="editable" data-field="name" data-id="3">王五</td>
                <td class="editable" data-field="age" data-id="3">35</td>
            </tr>
        </tbody>
    </table>
    <script>
        $(document).ready(function() {
            $('td.editable').click(function() {
                var value = $(this).text();
                var field = $(this).data('field');
                var id = $(this).data('id');
                var input = $('<input type="text" />');
                input.val(value);
                $(this).empty().append(input);
                input.focus();
                input.blur(function() {
                    var new_value = $(this).val();
                    if (new_value != value) {
                        var data = {};
                        data[field] = new_value;
                        $.ajax({
                            method: 'POST',
                            url: '/update',
                            data: {
                                id: id,
                                data: JSON.stringify(data)
                            },
                            success: function(response) {
                                console.log('更新成功');
                                $('td.editable[data-id="' + id + '"][data-field="' + field + '"]').text(new_value);
                            },
                            error: function(response) {
                                alert('更新失败');
                                $('td.editable[data-id="' + id + '"][data-field="' + field + '"]').text(value);
                            }
                        });
                    } else {
                        $('td.editable[data-id="' + id + '"][data-field="' + field + '"]').text(value);
                    }
                });
            });
        });
    </script>
</body>
</html>

ログイン後にコピー

上記の HTML ソースコードでは、jQuery ライブラリを使用し、いくつかのスタイルを定義しました。このうち、編集可能な各セルは editable クラスで設定され、フィールド名と行 ID は data-field 属性と data-id 属性を使用して保存されます。。次に、jQuery の ready 関数を使用して、ページが読み込まれた後に各編集可能なセルのクリックイベントをバインドします。クリックイベントは、現在のセルの値、フィールド、行 ID を取得し、input 要素を作成し、現在の値を input 要素に割り当て、input# を置き換えます。 ## 要素は現在のセルに挿入され、ユーザーが編集できるようになります。編集が完了すると、input 要素はフォーカスを失い、新しい値を取得し、行 ID とフィールド名とともに JSON オブジェクトにパッケージ化し、AJAX 経由でサーバーに送信して保存できます。。保存が成功した場合は元のセルの内容が更新され、そうでない場合は元の値に復元されます。

これまでのところ、クリックして変更する機能を正常に実装できました。 jQuery を使用してポイントアンドクリックで変更を行うのは非常に便利で、必要なコードは簡単な数行だけです。もちろん、実際のプロジェクトにはより詳細で複雑なビジネスロジックが含まれますが、上記のコードのアイデアから学び、特定のビジネスニーズに合わせて改善し、最適化することができます。

以上がjqueryは即時変更を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。