JavaScriptでtrを取得する方法

JavaScript では、テーブル内の 要素など、HTML ページ内の特定の要素を取得する必要があることがよくあります。 要素はデータの表示によく使用され、Web ページで最もよく使用される HTML 要素の 1 つであるため、 要素を取得することは非常に重要です。この記事では、JavaScript を使用して 要素を取得する方法と関連テクニックを紹介します。

一般的に、HTML テーブル内の 要素を取得するには、次のメソッドを使用できます:

1. ID によって 要素を取得します:

テーブルに ID 属性がある場合は、document.getElementById() メソッドを使用して 要素を取得できます。以下はサンプル コードです:

<table id="myTable">
  <tr>
    <td>第一行</td>
  </tr>
  <tr>
    <td>第二行</td>
  </tr>
  <tr>
    <td>第三行</td>
  </tr>
</table>

<script>
const firstRow = document.getElementById("myTable").rows[0];
console.log(firstRow);
</script>

この例では、document.getElementById() メソッドを使用して、ID 属性「myTable」を持つテーブル要素を取得します。次に、.rows[] 配列を使用してテーブル内の行にアクセスし、最初の行を firstRow 変数に保存します。最後に、コンソールに firstRow を出力すると、 要素が表示されるはずです。

2. クラス名による 要素の取得:

テーブル内の一部の行が同じクラス名を持つ場合は、 document.getElementsByClassName() メソッドを使用できます。これらの行の 要素を取得します。以下はサンプル コードです:

<table>
  <tr class="row-one">
    <td>第一行</td>
  </tr>
  <tr class="row-two">
    <td>第二行</td>
  </tr>
  <tr class="row-one">
    <td>第三行</td>
  </tr>
</table>

<script>
const rowOnes = document.getElementsByClassName("row-one");
console.log(rowOnes);
</script>

この例では、document.getElementsByClassName() メソッドを使用して、クラス名「row-one」を持つすべての 要素を取得し、それらを rowOnes に格納しています。変数。最後に、rowOnes をコンソールに出力すると、2 つの 要素 (1 行目と 3 行目) が表示されるはずです。

3. 要素タイプごとに 要素を取得する:

document.getElementsByTagName() メソッドを通じてテーブル内の 要素を取得することもできます。 。以下はサンプル コードです:

<table>
  <tr>
    <td>第一行</td>
  </tr>
  <tr>
    <td>第二行</td>
  </tr>
  <tr>
    <td>第三行</td>
  </tr>
</table>

<script>
const rows = document.getElementsByTagName("tr");
console.log(rows);
</script>

この例では、 document.getElementsByTagName() メソッドを使用してテーブル内のすべての 要素を取得し、それらを rows 変数に格納します。最後に、コンソールに行を出力すると、3 つの 要素が表示されるはずです。

上記の方法に加えて、次の手法を使用して 要素を取得することもできます:

4. querySelector() メソッドの使用:

querySelector() メソッドを使用して、CSS セレクターに基づいて単一の要素を選択できます。以下はサンプル コードです:

<table>
  <tr>
    <td>第一行</td>
  </tr>
  <tr>
    <td>第二行</td>
  </tr>
  <tr>
    <td>第三行</td>
  </tr>
</table>

<script>
const firstRow = document.querySelector("tr");
console.log(firstRow);
</script>

この例では、querySelector() メソッドを使用してテーブル内の最初の 要素を選択し、それを firstRow 変数に保存します。最後に、コンソールに firstRow を出力すると、最初の行が表示されるはずです。

5. querySelectorAll() メソッドを使用する:

querySelectorAll() メソッドを使用して、CSS セレクターに基づいて複数の要素を選択することもできます。以下はサンプル コードです:

<table>
  <tr class="row-one">
    <td>第一行</td>
  </tr>
  <tr class="row-two">
    <td>第二行</td>
  </tr>
  <tr class="row-one">
    <td>第三行</td>
  </tr>
</table>

<script>
const rowOnes = document.querySelectorAll(".row-one");
console.log(rowOnes);
</script>

この例では、querySelectorAll() メソッドを使用して、テーブル内のクラス名「row-one」を持つすべての 要素を選択し、それらを rowOnes に保存します。変数で。最後に、rowOnes をコンソールに出力すると、2 つの 要素 (1 行目と 3 行目) が表示されるはずです。

概要:

JavaScript で 要素を取得するのは難しくありません。document.getElementById() メソッド、document.getElementsByClassName() メソッド、document.getElementsByTagName を使用できます。 () メソッド、querySelector() メソッド、および querySelectorAll() メソッドは簡単に利用できます。どの方法を選択するかは、取得したい要素と、それらの要素が HTML ドキュメント内のどこにあるかによって異なります。これらのテクノロジーにより、テーブルを簡単に操作し、Web ページ上にデータを動的に表示できます。

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