JavaScriptでn番目のtr要素を取得する方法


方法1: getElementByIdを使用する テーブルにid属性を追加し、そのidを使用してtr要素を取得します。

<table id="myTable">
  <tr><td>行1</td></tr>
  <tr><td>行2</td></tr>
  <tr><td>行3</td></tr>
  <!-- 追加の行 -->
</table>
// n番目のtr要素を取得
var table = document.getElementById("myTable");
var rows = table.getElementsByTagName("tr");
var nthRow = rows[n-1]; // n番目の行(0から始まるインデックスなのでn-1)
// 結果をコンソールに表示
console.log(nthRow);

方法2: querySelectorAllを使用する CSSセレクタを使用してn番目のtr要素を取得します。

var nthRow = document.querySelectorAll("#myTable tr:nth-child(" + n + ")")[0];
// 結果をコンソールに表示
console.log(nthRow);

方法3: ループを使用する テーブルの全てのtr要素をループし、n番目の要素を見つけます。

var table = document.getElementById("myTable");
var rows = table.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
  if (i === n - 1) {
    var nthRow = rows[i];
    break;
  }
}
// 結果をコンソールに表示
console.log(nthRow);

これらの方法を使用して、JavaScriptでn番目のtr要素を取得することができます。適用する方法は、特定の状況や要件によって異なる場合があります。