ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryは追加、削除、変更、クエリを実行します
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 サイトの他の関連記事を参照してください。