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

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 08, 2023 pm 08:53 PM

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 id="jQuery增删改查">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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLとReact：マークアップとコンポーネントの関係Apr 12, 2025 am 12:03 AM

HTMLとReactの関係は、フロントエンド開発の中核であり、最新のWebアプリケーションのユーザーインターフェイスを共同で構築します。 1）HTMLはコンテンツ構造とセマンティクスを定義し、Reactはコンポーネントを介して動的インターフェイスを構築します。 2）ReactコンポーネントはJSX構文を使用してHTMLを埋め込み、インテリジェントなレンダリングを実現します。 3）コンポーネントライフサイクルは、状態および属性に従ってHTMLレンダリングと動的に更新を管理します。 4）コンポーネントを使用して、HTML構造を最適化し、保守性を向上させます。 5）パフォーマンスの最適化には、不必要なレンダリングの回避、重要な属性の使用、およびコンポーネントの単一の責任を維持することが含まれます。

ReactとFrontend：インタラクティブエクスペリエンスの構築Apr 11, 2025 am 12:02 AM

Reactは、インタラクティブなフロントエンドエクスペリエンスを構築するための好ましいツールです。 1）Reactは、コンポーネント化と仮想DOMを通じてUIの開発を簡素化します。 2）コンポーネントは、関数コンポーネントとクラスコンポーネントに分割されます。関数コンポーネントはよりシンプルで、クラスコンポーネントはより多くのライフサイクル方法を提供します。 3）Reactの作業原則は、パフォーマンスを改善するために仮想DOMおよび調整アルゴリズムに依存しています。 4）国家管理は、usestateまたはthis.stateを使用し、ComponentDidmountなどのライフサイクルメソッドが特定のロジックに使用されます。 5）基本的な使用には、コンポーネントの作成と状態の管理が含まれ、高度な使用にはカスタムフックとパフォーマンスの最適化が含まれます。 6）一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。

反応とフロントエンドスタック：ツールとテクノロジーApr 10, 2025 am 09:34 AM

Reactは、コアコンポーネントと状態管理を備えたユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1）コンポーネントと州の管理を通じてUIの開発を簡素化します。 2）作業原則には和解とレンダリングが含まれ、React.memoとusememoを通じて最適化を実装できます。 3）基本的な使用法は、コンポーネントを作成およびレンダリングすることであり、高度な使用法にはフックとコンテキストアピの使用が含まれます。 4）不適切なステータスの更新などの一般的なエラーでは、ReactDevtoolsを使用してデバッグできます。 5）パフォーマンスの最適化には、React.MEMO、仮想化リスト、コードスプリッティの使用が含まれ、コードを読みやすく保守可能に保つことがベストプラクティスです。

HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上Apr 09, 2025 am 12:11 AM

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。

反応コンポーネント：HTMLで再利用可能な要素を作成しますApr 08, 2025 pm 05:53 PM

Reactコンポーネントは、機能またはクラスによって定義され、UIロジックのカプセル化、およびプロップを介して入力データを受け入れることができます。 1）コンポーネントの定義：関数またはクラスを使用して、反応要素を返します。 2）レンダリングコンポーネント：Reactコールレンダリングメソッドまたは機能コンポーネントを実行します。 3）マルチプレックスコンポーネント：データをプロップに渡して、複雑なUIを構築します。コンポーネントのライフサイクルアプローチにより、ロジックをさまざまな段階で実行でき、開発効率とコードメンテナビリティが向上します。