jquery menyedari perubahan segera-Soal Jawab bahagian hadapan-php.cn

jquery menyedari perubahan segera

王林

Lepaskan： 2023-05-23 13:43:07

asal

508 orang telah melayarinya

Dengan perkembangan Internet, interaktiviti dan responsif halaman web telah menarik lebih banyak perhatian. Fungsi penyuntingan sebaris juga digunakan secara meluas di pelbagai laman web. Klik-untuk-tukar merujuk kepada fungsi mengedit kandungan secara terus pada halaman, iaitu, tidak perlu melompat ke halaman baharu atau menggunakan borang untuk mengedit Anda boleh terus mengedit kandungan pada halaman dengan klik tetikus , yang sangat mudah dan pantas.

Dalam proses merealisasikan pengubahsuaian segera, jQuery ialah alat yang sangat praktikal. jQuery ialah perpustakaan JavaScript yang pantas dan ringkas yang menyediakan pelbagai fungsi yang boleh membantu kami melaksanakan operasi DOM, pengendalian acara, kesan animasi dan banyak lagi dengan mudah. Di bawah ini kami akan memperkenalkan cara menggunakan jQuery untuk mencapai perubahan titik dan klik.

Pertama, kita perlu menyediakan halaman contoh. Katakan kita mempunyai halaman dengan berbilang jadual, setiap satu dengan nama dan nilai umur. Kami berharap pengguna boleh mengedit maklumat ini terus pada halaman dan menyimpannya secara automatik ke pelayan. Berikut ialah kod sumber HTML halaman sampel:

<!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>

Salin selepas log masuk

Dalam kod sumber HTML di atas, kami menggunakan perpustakaan jQuery dan menentukan beberapa gaya. Antaranya, setiap sel boleh diedit ditetapkan dengan kelas editable dan nama medan serta ID baris disimpan menggunakan atribut data-field dan data-id. Seterusnya, kami menggunakan fungsi ready jQuery untuk mengikat acara klik setiap sel boleh diedit selepas halaman dimuatkan. Peristiwa klik akan mendapat nilai, medan dan ID baris sel semasa, mencipta elemen input, memberikan nilai semasa kepada elemen input dan memasukkan elemen input ke dalam sel semasa supaya pengguna boleh mengeditnya. Selepas pengeditan selesai, elemen input akan kehilangan fokus, dan kami boleh mendapatkan nilai baharu, membungkusnya dengan ID baris dan nama medan ke dalam objek JSON dan menghantarnya ke pelayan melalui AJAX untuk disimpan. Jika simpan berjaya, kami akan mengemas kini kandungan sel asal, jika tidak, ia akan dipulihkan kepada nilai asal.

Pada ketika ini, kami telah berjaya melaksanakan fungsi klik dan tukar. Menggunakan jQuery untuk mencapai perubahan titik dan klik adalah sangat mudah dan hanya memerlukan beberapa baris kod yang mudah. Sudah tentu, projek sebenar akan melibatkan lebih banyak butiran dan logik perniagaan yang kompleks, tetapi kita boleh belajar daripada idea kod di atas dan menambah baik serta mengoptimumkannya mengikut keperluan perniagaan tertentu.

Atas ialah kandungan terperinci jquery menyedari perubahan segera. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!