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

1. ページの準備

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

2. データの追加

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

        
  
jQuery增删改查
 
 名称： 
 年龄： 
 添加 
 
 
 
ID
 
名称
 
年龄
 
操作
 
 
  

上記のコードでは、jQuery を使用してフォームの送信ボタンをリッスンし、フォームに入力されたデータを取得し、最後の

ボタン要素。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.append(``) .append(`${name}`) .append(`${age}`); // 构造表格行中的操作列 const td = $(''); const btn_update = $('修改'); const btn_delete = $('删除'); 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 のセレクター構文を使用して、指定された名前を含むデータのすべての行を選択し、

を渡します。メソッド 該当する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 = $(` 
 名称： 
 年龄： 
 修改 关闭 
 `); $('#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 サイトの他の関連記事を参照してください。