jqueryはテーブル内の4行のデータを削除します-フロントエンドQ&A-php.cn

jqueryはテーブル内の4行のデータを削除します

WBOY

リリース： 2023-05-23 16:02:08

オリジナル

491 人が閲覧しました

Web アプリケーションでは、テーブルは非常に一般的で重要なインターフェイス要素です。テーブル内の行と列は、データを表示したり、メニューオプションを提供したりするために使用されます。ただし、ユーザーが削除操作を実行した場合など、テーブル内のデータの一部の行を削除する必要がある場合があります。この記事ではjQueryを使ってテーブル内の4行のデータを削除する方法を紹介します。

ステップ 1: HTML テーブルを作成する

最初に行うことは、jQuery を使用してテーブル内の 4 行のデータを削除できるように HTML テーブルを作成することです。 HTML コードは次のとおりです。

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>女</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>35</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>23</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小明</td>
      <td>26</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

ログイン後にコピー

このテーブルにはヘッダーと 6 行のデータが含まれており、各行には名前、年齢、性別の 3 列のデータが含まれています。私たちの目標は、テーブル内のデータの最初の 4 行を削除することです。

ステップ 2: jQuery を使用して、削除する必要があるデータの行を選択する

テーブル内のデータの最初の 4 行を削除するには、jQuery セレクターを使用して、これら 4 行のデータを選択します。コードは次のとおりです:

var rowsToDelete = $('#myTable tbody tr:lt(4)');

ログイン後にコピー

このコード行では、チェーン呼び出しメソッドを使用しています。まず、$('#myTable') を使用してテーブルを選択し、次に を使用します。 :lt(4)データの最初の 4 行が選択され、最後に tbody tr を通じてデータのすべての行が選択されます。このように、rowsToDelete 変数は、削除する必要があるすべての行データになります。

ステップ 3: jQuery を使用して選択した行データを削除する

選択したテーブルの行データを使用して、jQuery を使用してこれらの行を削除できます。コードは次のとおりです。

rowsToDelete.remove();

ログイン後にコピー

この単純なコード行は、jQuery の remove() メソッドを使用して、選択されたテーブル行データを削除します。

ステップ 4: 削除結果を確認する

データの最初の 4 行が正常に削除されたかどうかを確認するには、次のコードを使用してテーブルデータをコンソールに出力します。 ##

console.log($('#myTable tbody tr'));

ログイン後にコピー

If データの最初の 4 行が正常に削除され、最後の 2 行のデータのみがコンソールに表示されます。

完全なコードは次のとおりです:

<html>
  <head>
    <title>jQuery删除表格四行数据</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function(){
        var rowsToDelete = $('#myTable tbody tr:lt(4)');
        rowsToDelete.remove();
        console.log($('#myTable tbody tr'));
      });
    </script>
  </head>
  <body>
    <table id="myTable">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>25</td>
          <td>男</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>30</td>
          <td>男</td>
        </tr>
        <tr>
          <td>王五</td>
          <td>28</td>
          <td>女</td>
        </tr>
        <tr>
          <td>赵六</td>
          <td>35</td>
          <td>男</td>
        </tr>
        <tr>
          <td>小红</td>
          <td>23</td>
          <td>女</td>
        </tr>
        <tr>
          <td>小明</td>
          <td>26</td>
          <td>男</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

ログイン後にコピー

この記事で提供されているコードスニペットは、テーブルの行データを削除するための jQuery 操作を学習するための基礎として使用できます。読者は次に従ってコードを変更できます。実際には、独自のアプリケーションシナリオに適応する必要があります。

以上がjqueryはテーブル内の4行のデータを削除しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。