jquery는 추가, 삭제, 수정 및 쿼리를 수행합니다.-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

jquery는 추가, 삭제, 수정 및 쿼리를 수행합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 08, 2023 pm 08:53 PM

웹 애플리케이션이 대중화되면서 클라이언트의 보다 시기적절한 응답에 대한 요구가 점점 더 높아지고 있습니다. 단순한 페이지 상호 작용은 더 이상 대중의 요구를 충족할 수 없습니다. 이때 JavaScript 라이브러리 jQuery가 탄생했습니다. 대부분의 경우 페이지에서 데이터 추가, 삭제, 수정, 쿼리 등의 작업을 수행해야 하는 경우 jQuery가 매우 편리한 선택입니다. 다음으로 jQuery를 사용하여 추가, 삭제, 수정 및 확인 기능을 구현하는 방법에 대해 설명합니다.

1. 페이지 준비

HTML 페이지에서는 아래와 같이 추가, 삭제, 수정, 쿼리에 필요한 요소를 준비해야 합니다.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery增删改查</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/styles.css">
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <script src="./js/jquery_method.js"></script>
</head>
<body>

    <h1>jQuery增删改查</h1>

    <form id="add_form">
        <label for="add_name">名称：</label>
        <input type="text" id="add_name" name="name" required><br>
        <label for="add_age">年龄：</label>
        <input type="number" id="add_age" name="age" required><br>
        <button type="submit" id="add_btn">添加</button>
    </form>

    <table id="table" border="1">
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
    </table>

</body>
</html>

로그인 후 복사

양식 요소와 데이터 테이블은 물론 jQuery 참조 및 쿼리도 포함됩니다. 사용자 정의 JavaScript 파일.

2. 데이터 추가

jQuery를 사용하여 데이터를 추가하는 경우 HTML 페이지에 양식을 정의하고 제출 버튼을 추가해야 합니다. 그리고 JavaScript(일반적으로 jQuery_method.js)로 이벤트 리스너를 작성하여 양식의 데이터를 가져와 테이블에 추가합니다. 코드는 다음과 같습니다.

$(document).ready(function () {
    // 监听添加操作
    $('#add_btn').on('click', function (e) {
        e.preventDefault();     // 阻止表单默认提交行为
        const name = $('#add_name').val();
        const age = $('#add_age').val();
        addData(name, age);
    });
});

function addData(name, age) {
    // 构造表格行
    const tr = $('<tr>');
    tr.append(`<td id="id_${name}"></td>`)
        .append(`<td>${name}</td>`)
        .append(`<td>${age}</td>`);
    // 构造表格行中的操作列
    const td = $('<td>');
    const btn_update = $('<button>修改</button>');
    const btn_delete = $('<button>删除</button>');
    btn_update.on('click', function () {
        updateData(name);
    });
    btn_delete.on('click', function () {
        deleteData(name);
    });
    td.append(btn_update).append(btn_delete);
    tr.append(td);
    // 添加到表格中
    $('#table').append(tr);

    // 分配ID
    const id = $('#table tr').length;
    $(`#id_${name}`).html(id);
}

로그인 후 복사

위 코드에서는 jQuery를 사용하여 양식의 제출 버튼을 듣고 양식에 입력된 데이터를 얻은 다음 마지막 td</code에 두 개의 버튼 요소를 추가합니다. > 요소, 하나는 데이터 수정용이고 다른 하나는 데이터 삭제용입니다. <code>addData() 함수는 테이블에 데이터를 추가하고 각 데이터 행에 ID를 할당하는 데 사용됩니다. td元素中添加了两个button元素，一个用于修改数据，一个用于删除数据。函数addData()用于将数据添加到表格中，并给每行数据分配一个ID。

三、查询数据

查询数据可以直接操作表格元素来实现。以查询某个姓名为例：

function queryData(name) {
    const tr = $(`#table tr td:nth-child(2):contains(${name})`).parent();
    return tr;
}

로그인 후 복사

以上代码中，我们使用jQuery的选择器语法，选择所有包含指定姓名的所有行数据，并通过.parent()方法返回其所在的tr

3. 데이터 쿼리

데이터 쿼리는 테이블 요소를 직접 조작하여 수행할 수 있습니다. 이름 쿼리를 예로 들어 보겠습니다.

function updateData(name) {
    const tr = queryData(name);
    const old_name = tr.find('td').eq(1).text();
    const old_age = tr.find('td').eq(2).text();
    const $form_update = $(`
            <form>
                <label for="update_name">名称：</label>
                <input type="text" id="update_name" name="update_name" value="${old_name}" required><br>
                <label for="update_age">年龄：</label>
                <input type="number" id="update_age" name="update_age" value="${old_age}" required><br>
                <button type="submit">修改</button>
                <button type="button" id="close_btn">关闭</button>
            </form>
        `);
    $('#table').after($form_update);

    $form_update.on('submit', function (e) {
        e.preventDefault();
        const new_name = $('#update_name').val();
        const new_age = $('#update_age').val();
        tr.find('td').eq(1).text(new_name);
        tr.find('td').eq(2).text(new_age);
        tr.attr('id', `id_${new_name}`);
        $form_update.remove();
    });
    $('#close_btn').on('click', function () {
        $form_update.remove();
    });
}

로그인 후 복사

위 코드에서는 jQuery의 선택기 구문을 사용하여 지정된 이름이 포함된 데이터의 모든 행을 선택하고 .parent() 메서드를 통해 해당 위치를 반환합니다. tr 요소입니다.

4. 데이터 수정

데이터를 수정하려면 먼저 수정해야 할 데이터를 쿼리한 다음 이를 모달 상자(일반적으로 양식)에 표시하고 사용자가 수정해야 하는 값을 입력할 때까지 기다려야 합니다. 수정하고 수정된 데이터를 제출합니다. 모달 닫기를 위한 이벤트 리스너를 추가한 후 사용자가 입력한 값을 기반으로 테이블의 데이터를 업데이트합니다. 코드는 다음과 같습니다.

function deleteData(name) {
    const tr = queryData(name);
    const $form_delete = $(`
            <form>
                <label>
                    您确定要删除名称为 <strong>${name}</strong> 的数据吗？
                </label>
                <button type="submit">确定</button>
                <button type="button" id="close_btn">取消</button>
            </form>
        `);
    $('#table').after($form_delete);

    $form_delete.on('submit', function (e) {
        e.preventDefault();
        tr.remove();
        $form_delete.remove();
    });
    $('#close_btn').on('click', function () {
        $form_delete.remove();
    });
}

로그인 후 복사

위 코드에서는 jQuery 선택기 구문을 사용하여 수정해야 할 데이터를 선택하고 ID를 할당했습니다. 그런 다음 모달 상자를 팝업하여 수정해야 할 데이터를 사용자에게 표시하여 사용자가 수정할 수 있도록 합니다. 수정이 완료되면 jQuery를 사용하여 행을 다시 찾고 테이블의 데이터를 업데이트합니다. 버튼을 닫는 작업은 모달 상자를 닫아도 수행됩니다.

5. 데이터 삭제

데이터를 삭제하려면 삭제해야 할 데이터를 모달 박스를 통해 사용자에게 표시한 다음 삭제 버튼의 클릭 이벤트를 듣고 테이블에서 행을 삭제해야 합니다. . 코드는 다음과 같습니다.

rrreee

위 코드에서는 jQuery의 선택기 구문을 사용하여 삭제해야 할 데이터를 선택하고, 삭제해야 할 데이터를 모달 박스를 팝업하여 사용자에게 표시합니다. 사용자가 확인을 클릭하면 데이터 행이 테이블에서 삭제됩니다. 취소 버튼 작동을 위해 모달 상자는 여전히 닫혀 있습니다. 🎜🎜6. 요약🎜🎜위의 코드를 통해 jQuery를 사용하여 추가, 삭제, 수정 및 확인이 매우 쉽다는 것을 알 수 있습니다. 페이지 준비가 완료되면 jQuery의 셀렉터 구문을 이용하여 동작이 필요한 DOM 요소를 선택하고, jQuery의 이벤트 리스너를 이용하여 해당 이벤트를 처리합니다. 동시에 jQuery의 간결한 코드는 큰 편리함도 제공합니다. 복잡한 로직이 필요하지 않은 추가, 삭제, 수정, 검색 기능에 jQuery를 사용하는 것은 매우 좋은 선택입니다. 🎜

위 내용은 jquery는 추가, 삭제, 수정 및 쿼리를 수행합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.