jqueryでテーブルを走査して各trを取得する方法

jQuery の開発プロセスでは、テーブル処理が非常に一般的な要件であり、テーブルを走査して各 tr 要素を取り出すことも基本操作の 1 つです。以下では、サンプルコードを使用して、jQuery を使用してテーブルを走査し、各 tr 要素を削除する方法を詳しく紹介します。

まず、複数の

要素を含む HTML テーブルを準備する必要があります。例は次のとおりです。

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>30</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

次に、次のコードを使用して、このテーブルの各 tr 要素を走査し、関連する操作を実行します。

$("#myTable tbody tr").each(function() {
  //这里可以对每个tr元素进行操作
  console.log($(this).html());
});

上記のコードでは、jQuery セレクター $("#myTable tbody tr") を使用して、テーブル内の tbody タグ内のすべての tr 要素を選択します。次に、.each() メソッドを使用して、各 tr 要素を走査して操作します。ここでは、各 tr 要素の内容をコンソールに出力しました。これを必要なコードに置き換えることができます。

セレクターで #myTable を使用してテーブル全体を取得し、tbody を使用してテーブルのコンテンツ部分を取得することに注意してください。ヘッダーもトラバースされます。

さらに、table 要素の操作中に、各 tr 要素内のサブ要素 td を取得して操作することもできます。次の例は、各 tr 内のすべての td 要素を取得する方法を示しています。

$("#myTable tbody tr").each(function() {
  //获取当前行的td元素
  $(this).children('td').each(function() {
    //这里可以对每个td元素进行操作
    console.log($(this).html());
  });
});

上記のコードは、$(this).children('td') を通じて現在の行のすべての td 要素を取得し、.each()## を使用します。 # メソッド。関連する操作をトラバースして実行します。

要約: 上記のコード例を見ると、jQuery を使用してテーブルを走査し、各 tr 要素を取り出すのが非常に簡単であることがわかります。必要なのは、セレクターを使用して tr 要素を取得するだけです。 table を取得するか、サブ要素セレクターを使用して tr 要素.td 要素を取得し、

.each() メソッドを使用して走査します。もちろん、実際のニーズに応じて、各 tr 要素または td 要素に対して関連する操作を実行して、テーブルのカスタマイズされた表示を実現することができます。

以上がjqueryでテーブルを走査して各trを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。