jquery는 즉각적인 수정을 실현합니다.-프런트엔드 Q&A-php.cn

jquery는 즉각적인 수정을 실현합니다.

王林

풀어 주다： 2023-05-23 13:43:07

원래의

583명이 탐색했습니다.

인터넷이 발전하면서 웹페이지의 상호작용성과 반응성이 점점 더 주목을 받고 있습니다. 인라인 편집 기능은 다양한 웹사이트에서도 널리 사용되고 있습니다. 클릭하여 변경이란 페이지의 내용을 직접 편집하는 기능을 의미합니다. 즉, 편집을 위해 새 페이지로 이동하거나 양식을 사용할 필요 없이 마우스 클릭만으로 페이지의 내용을 직접 편집할 수 있습니다. , 이는 매우 편리하고 빠릅니다.

순간적인 변화를 구현하는 과정에서 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类，并使用data-field和data-id属性保存了字段名称和行ID。接着，我们在页面加载完成后使用jQuery的ready函数来绑定每个可编辑单元格的点击事件。点击事件会获取当前单元格的值、字段和行ID，并创建一个input元素，将当前值赋值给input元素，并将input元素插入到当前单元格中，以便用户进行编辑。编辑完成后，input요소가 포커스를 잃게 되며 새 값을 가져와서 행 ID와 필드 이름과 함께 JSON 개체로 패키징하고 AJAX를 통해 서버에 전송하여 저장할 수 있습니다. 저장이 성공하면 원래 셀 내용이 업데이트되고, 그렇지 않으면 원래 값으로 복원됩니다.

이 시점에서 클릭 및 변경 기능을 성공적으로 구현했습니다. jQuery를 사용하여 포인트 앤 클릭 방식으로 변경하는 것은 매우 편리하며 몇 줄의 간단한 코드만 있으면 됩니다. 물론 실제 프로젝트에는 더 자세한 내용과 복잡한 비즈니스 로직이 포함되지만 위의 코드 아이디어를 통해 배우고 특정 비즈니스 요구에 따라 개선하고 최적화할 수 있습니다.

위 내용은 jquery는 즉각적인 수정을 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!