jqueryは追加、削除、変更、クエリを実行します-フロントエンドQ&A-php.cn

jqueryは追加、削除、変更、クエリを実行します

WBOY

リリース： 2023-05-08 20:53:07

オリジナル

874 人が閲覧しました

Web アプリケーションの普及に伴い、クライアントからのタイムリーな応答に対する要求はますます高まっており、単純なページインタラクションではもはや大衆のニーズを満たすことができなくなっています。このとき、JavaScript ライブラリ jQuery が登場しました。ほとんどの場合、ページ上でデータの追加、削除、変更、クエリなどの操作を実行する必要がある場合、jQuery は非常に便利な選択肢です。次に、jQuery を使用して追加、削除、変更、チェック機能を実装する方法について説明します。

1. ページの準備

HTML ページでは、以下に示すように、追加、削除、変更、クエリに必要な要素を準備する必要があります。フォーム要素とデータテーブル、および jQuery 参照とカスタム JavaScript ファイル。

2. データの追加

jQuery を使用してデータを追加する場合は、HTML ページにフォームを定義し、送信ボタンを追加する必要があります。そして、JavaScript (通常は jQuery_method.js) でイベントリスナーを作成し、フォームのデータを取得してテーブルに追加します。コードは次のとおりです。

<!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 を使用してフォームの送信ボタンをリッスンし、フォームに入力されたデータを取得し、最後の

td に 2 つの要素を追加します。

ボタン要素。1 つはデータの変更用、もう 1 つはデータの削除用です。関数 addData() は、テーブルにデータを追加し、データの各行に ID を割り当てるために使用されます。 3. データのクエリ

データのクエリは、テーブル要素を直接操作することで実現できます。名前のクエリを例に挙げます。

$(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 のセレクター構文を使用して、指定された名前を含むデータのすべての行を選択し、

.parent()

を渡します。メソッド該当する tr 要素を返します。 4. データの変更

データを変更するには、まず変更する必要があるデータをクエリし、それをモーダルボックス (通常はフォーム) に表示して、ユーザーは、変更が必要なデータの値を入力し、変更したデータを送信します。モーダルを閉じるためのイベントリスナーを追加すると、ユーザーが入力した値に基づいてテーブル内のデータが更新されます。コードは次のとおりです。

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

ログイン後にコピー

上記のコードでは、jQuery セレクター構文を使用して、変更する必要があるデータを選択し、それに ID を割り当てます。次に、モーダルボックスがポップアップして変更が必要なデータがユーザーに表示され、ユーザーが変更できるようになります。変更が完了したら、jQuery を使用して行を再度検索し、テーブル内のデータを更新します。ボタンを閉じる操作もモーダルボックスを閉じることで実現されます。

5. データの削除

データを削除するには、モーダルボックスを通じて削除する必要があるデータをユーザーに表示し、削除のクリックイベントをリッスンする必要があります。ボタンをクリックしてテーブルに追加します。この行を削除します。コードは次のとおりです。

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 のセレクター構文を使用して削除する必要があるデータを選択し、モーダルをポップアップしてユーザーに削除する必要のあるデータを表示します。箱。ユーザーが「OK」をクリックすると、データ行がテーブルから削除されます。キャンセルボタンの操作のため、モーダルボックスは閉じたままになります。

6. 概要

上記のコードを通して、jQuery を使用して追加、削除、変更、確認することが非常に簡単であることがわかります。ページの準備が完了したら、jQuery のセレクター構文を使用して操作する必要がある DOM 要素を選択し、jQuery のイベントリスナーを使用して対応するイベントを処理します。同時に、jQuery の簡潔なコードは大きな利便性ももたらします。 jQuery の使用は、複雑なロジックを必要としない追加、削除、変更、およびクエリ関数に非常に適した選択肢です。

以上がjqueryは追加、削除、変更、クエリを実行しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。