HTML DOM tr オブジェクト

HTML DOM tr オブジェクト: 表格行操作ガイド

このドキュメントでは、HTML DOMの <tr> オブジェクトについて詳しく解説します。<tr> オブジェクトはHTMLテーブルの行を表し、JavaScriptを使って行の属性、メソッド、動的な操作方法について説明します。

1. <tr> オブジェクトとは？

<tr> は、HTMLテーブルの1行を表し、テーブルデータ (<td> 要素) が含まれる行を定義します。

  • <tr> は <table> 要素の子要素であり、<table> 要素内で使用する必要があります。

2. <tr> オブジェクトのプロパティ

<tr> オブジェクトには、以下のプロパティがあります。

プロパティ 説明
rowIndex 行のインデックス番号を返します (0 から始まります)。
cells 行内のすべてのセル (<td> 要素) を含む HTMLCollection を返します。
sectionRowIndex 行が属するセクション (<thead>、<tbody>、<tfoot>) 内でのインデックス番号を返します。

3. <tr> オブジェクトのメソッド

<tr> オブジェクトには、以下のメソッドがあります。

メソッド 説明
insertCell() 指定した位置に新しいセル (<td> 要素) を挿入します。
deleteCell() 指定した位置のセルを削除します。

4. <tr> オブジェクトを使ったテーブル行の操作方法

4.1 表格行の取得

getElementsByTagName("tr") メソッドまたは querySelector() メソッドを使用して、テーブル内の行を取得できます。

<table id="myTable">
  <tr>...</tr>
</table>

<script>
  // すべての行を取得
  const rows = document.getElementById("myTable").getElementsByTagName("tr");

  // 最初の行を取得
  const firstRow = document.querySelector("#myTable tr");
</script>

4.2 表格行の走査

for ループを使用して、テーブル内のすべての行を走査できます。

<table id="myTable">
  <tr>...</tr>
</table>

<script>
  const table = document.getElementById("myTable");
  const rows = table.getElementsByTagName("tr");

  for (let i = 0; i < rows.length; i++) {
    // 各行に対する処理
    console.log(rows[i]); 
  }
</script>

4.3 新しい行の追加

insertRow() メソッドを使用して、テーブルに新しい行を追加できます。

<table id="myTable">
  <tr>...</tr>
</table>

<script>
  const table = document.getElementById("myTable");

  // 新しい行を作成
  const newRow = table.insertRow();

  // 新しいセルを追加
  const newCell = newRow.insertCell();
  newCell.textContent = "新しいセル";
</script>

4.4 行の削除

deleteRow() メソッドを使用して、指定した行を削除できます。

<table id="myTable">
  <tr>...</tr>
</table>

<script>
  const table = document.getElementById("myTable");

  // 2 番目の行を削除
  table.deleteRow(1); 
</script>

5. サンプルコード

以下のサンプルコードは、JavaScriptを使用して、テーブルの行を取得、追加、削除、変更する方法を示しています。

<!DOCTYPE html>
<html>
<head>
<title>テーブルの操作</title>
</head>
<body>

<table id="myTable" border="1">
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>田中太郎</td>
    <td>30</td>
  </tr>
</table>

<br>

<button onclick="addRow()">行の追加</button>
<button onclick="deleteRow()">最後の行を削除</button>

<script>
function addRow() {
  // テーブルを取得
  var table = document.getElementById("myTable");

  // 新しい行を作成
  var newRow = table.insertRow();

  // 新しいセルを追加
  var cell1 = newRow.insertCell();
  var cell2 = newRow.insertCell();

  // セルの内容を設定
  cell1.innerHTML = "新しい行";
  cell2.innerHTML = "";
}

function deleteRow() {
  // テーブルを取得
  var table = document.getElementById("myTable");

  // 最後の行を削除
  table.deleteRow(table.rows.length - 1);
}
</script>

</body>
</html>

関連リソース

よくある質問

  1. Q: <tr> 要素は <table> 要素の外で使用できますか？

    A: いいえ、<tr> 要素は <table> 要素の子要素としてのみ使用できます。<table> 要素の外で使用すると、ブラウザが正しく表示できない可能性があります。

  2. Q: JavaScript でテーブルの特定のセルにアクセスするにはどうすればよいですか？

    A: table.rows[行インデックス].cells[セルインデックス] を使用して、特定のセルにアクセスできます。たとえば、2 行目の 3 番目のセルにアクセスするには、table.rows[1].cells[2] を使用します。

  3. Q: 既存の行にセルを追加するにはどうすればよいですか？

    A: insertCell() メソッドを使用して、既存の行にセルを追加できます。たとえば、2 行目にセルを追加するには、table.rows[1].insertCell() を使用します。