インターネット技術の継続的な発展に伴い、Web アプリケーションの重要性は日に日に増しています。テーブルは重要な情報表示ツールであり、さまざまな管理システムで一般的に使用されます。このプログラムでは、データを表示するためのテーブルが必要ですが、テーブルを追加、削除、変更、確認するための便利なツールも必要です。これにより、作業効率が大幅に向上します。この記事ではjQueryを使ってテーブルの追加・削除・変更・クエリ機能を実装する方法を紹介します。
まず、HTML テーブルが必要です。次の HTML コードを使用して、単純なテーブルを作成できます。
<table id="table-data"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>25</td> <td><button class="delete">删除</button></td> </tr> <tr> <td>2</td> <td>李四</td> <td>30</td> <td><button class="delete">删除</button></td> </tr> <tr> <td>3</td> <td>王五</td> <td>28</td> <td><button class="delete">删除</button></td> </tr> </tbody> </table>
次に、jQuery の依存関係を追加する必要があります。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
次に、追加、削除、変更、およびチェック機能の実装を開始できます。
関数をフォームに追加するには、ユーザーがデータを入力できるフォームが必要です。フォームは次の HTML コードを使用して作成できます。
<form id="form-data"> <div> <label for="name">姓名:</label> <input type="text" id="name" required> </div> <div> <label for="age">年龄:</label> <input type="number" id="age" required> </div> <button type="submit">添加</button> </form>
次に、jQuery に次のコードを追加します。
$("#form-data").submit(function(e) { e.preventDefault(); let name = $("#name").val(); let age = $("#age").val(); let newId = $("#table-data tbody tr:last-child td:first-child").text() + 1; let row = `<tr> <td>${newId}</td> <td>${name}</td> <td>${age}</td> <td><button class="delete">删除</button></td> </tr>`; $("#table-data tbody").append(row); $("#form-data")[0].reset(); });
まず、e.preventDefault()
を使用して、ブラウザのデフォルトの送信動作を禁止します。次に、フォームから名前と年齢を取得し、最後の行の番号に基づいて新しい番号を生成します。次に、JQuery を使用して新しい行を動的に追加し、テーブルの末尾に追加します。最後に、reset()
メソッドを呼び出して、フォーム フィールドの値を空にリセットします。
これで、行関数が正常に追加されました。
行を削除する関数を実装しましょう。以下に示すように、テーブルの HTML コードに削除ボタンを追加できます。
<td><button class="delete">删除</button></td>
次に、次の jQuery コードを使用して、データ行を削除する関数を実装できます。
$("tbody").on("click", ".delete", function() { if (confirm("确定删除这行数据吗?")) { $(this).closest("tr").remove(); } });
まず、.on()
イベント リスナーを使用して .delete
ボタンのクリック イベントをリッスンし、closest() を使用します。
メソッドは、テーブル行である最も近い祖先要素を取得し、remove()
メソッドを使用して削除します。その前に、ユーザーが誤ってデータを削除しないように、confirm()
メソッドを使用して、このデータ行を本当に削除するかどうかをユーザーに確認します。
次に行データを変更する関数を実装します。同様に、テーブルの各行に「編集」ボタンを追加します。
<td><button class="edit">编辑</button></td>
次に、編集ボタンのクリック イベント リスナーを追加し、その中にフォームを作成して、以下に示すように元のデータをフォームに入力する必要があります。
$("tbody").on("click", ".edit", function() { let id = $(this).closest("tr").find("td:first-child").text(); let name = $(this).closest("tr").find("td:nth-child(2)").text(); let age = $(this).closest("tr").find("td:nth-child(3)").text(); let form = ` <form id="form-edit"> <div> <label for="edit-name">姓名:</label> <input type="text" id="edit-name" value="${name}" required> </div> <div> <label for="edit-age">年龄:</label> <input type="number" id="edit-age" value="${age}" required> </div> <button type="submit">保存</button> </form>`; $(this).closest("tr").html(` <td>${id}</td> <td>${form}</td> <td></td> <td></td> `); });
まず、closest()
メソッドを使用して、現在の編集ボタンの祖先要素 (テーブル行) を取得し、find()## を使用します。 # セレクターを通じて先祖要素を取得するメソッド 次に、行の最初のセル (つまり ID)、2 番目のセル (つまり、名前)、および 3 番目のセル (つまり、年齢) のデータが変数に格納されます。
html() メソッドを使用して、テーブルの行の内容をフォームの HTML コードに置き換えます。
$("tbody").on("submit", "#form-edit", function(e) { e.preventDefault(); let name = $("#edit-name").val(); let age = $("#edit-age").val(); let id = $(this).closest("tr").find("td:first-child").text(); $(this).closest("tr").html(` <td>${id}</td> <td>${name}</td> <td>${age}</td> <td> <button class="delete">删除</button> <button class="edit">编辑</button> </td> `); });
closest() メソッドを使用して現在のフォームの祖先要素、つまりテーブル行を取得し、
find()## を使用します。 # 行の ID を取得するメソッド。次に、html()
メソッドを使用してフォームのデータをテーブル行に更新し、[削除] ボタンと [編集] ボタンを使用して行に再度追加します。最後に、reset()
メソッドを使用して、フォームのフィールドを空にリセットできます。 クエリ関数
<form id="form-search"> <input type="text" id="search-keyword" placeholder="请输入姓名搜索" required> <button type="submit">查询</button> </form>
次に、次の jQuery コードを使用してクエリ関数を実装します。
$("#form-search").submit(function(e) { e.preventDefault(); let keyword = $("#search-keyword").val(); $("tbody tr").hide(); $("tbody tr:contains('" + keyword + "')").show(); });
まず、
.submit() メソッドを使用して送信イベント リスナーをフォームに追加し、e.preventDefault()
を使用してデフォルトを抑制します。行動。次に、クエリ列からキーワードを取得し、hide()
メソッドを使用してテーブルのすべての行を非表示にします。最後に、:contains()
セレクターを使用してキーワードに基づいて表示する必要がある行をフィルターし、show()
メソッドを使用してこれらの行を表示します。 この時点で、基本的な jQuery テーブルの追加、削除、変更、クエリ関数が実装されました。この方法により、ユーザーはテーブル データの追加、削除、変更、クエリを簡単に行うことができ、作業効率が大幅に向上します。
以上がjqueryテーブルのクエリ関数の追加と削除の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。