jQueryを使用してテーブル内の指定したセルを削除します

タイトル: jQuery を使用してテーブル内の特定のセル要素を削除する

Web 開発では、テーブルを操作する必要がある状況によく遭遇します。そのうちの 1 つは削除するだけです。テーブル内の特定のセル要素。この機能はjQueryを使えば簡単に実現できます。以下では、特定のコード例を使用して、jQuery を使用してテーブル内の特定のセル要素を削除する方法を示します。

まず、例として単純な HTML テーブル構造が必要です。

<table id="myTable">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td><button class="deleteBtn">删除</button></td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td><button class="deleteBtn">删除</button></td>
    </tr>
</table>

上の例では、名前、年齢、アクション ボタンを含むテーブルがあり、各行の最後にセルが含まれています。 「削除」ボタンが含まれています。私たちの目標は、「削除」ボタンをクリックした後に行のデータを削除することです。

次に、jQuery を使用して削除関数を実装します。まず、jQuery ライブラリをページに導入します:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

次に、削除関数を実装する jQuery コードを記述します:

<script>
$(document).ready(function(){
    $('.deleteBtn').click(function(){
        $(this).closest('tr').remove();
    });
});
</script>

上記のコードでは、最初に $(document).ready を使用します。 ( ) を使用して、コードを実行する前にページがロードされていることを確認します。次に、$('.deleteBtn').click() を通じてすべての「削除」ボタンのクリック イベントをリッスンします。ボタンをクリックすると、$(this).closest('tr').remove() を通じて最も近い <tr> 要素 (つまり、現在の行) が検索されます。銀行を削除します。 <p>これで、任意の行の「削除」ボタンをクリックすると、その行のデータがテーブルから削除されます。 </p> <p>上記の詳細なコード例では、jQuery を使用してテーブル内の特定のセル要素を削除する方法を示します。この方法はシンプルかつ効率的であり、Web 開発でテーブル操作をより便利に実行するのに役立ちます。 </p> </tr>

以上がjQueryを使用してテーブル内の指定したセルを削除しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。