JavaScriptでtrを取得する事がうまくいきません

Question

こんにちは。

JavaScriptを使用した開発に携わって２ヶ月ほどの初心者です。
初歩的な質問で恐れ入りますがタイトルの通りです。

記述したコードはこちらです。

//<table class = "update"> の部分を取得
var formTable = document.update.getElementsByClassName("update");

//trを取得
var formTableTr = formTable.rows[0];

formTableにほしいテーブルのデータが入るところまではうまくいっているみたいです。

最終的にはtr全てを取得して、最後のtrのセルにボタンを追加するという処理をおこないたいので、まずはtrを取得したいのですがこの書き方の時点でうまくいきません。
おそらくrows使い方が違っているのだろうと思うのですが調べてもどの段階で間違ってしまっているのか把握できず質問させていただきました。

よろしくお願いいたします。

Comments

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

モダンブラウザならこうするとよいかと

<table class="update">
<tbody>
<tr id="tr1"><td>1</td><td>2</td><td>3</td></tr>
<tr id="tr2"><td>4</td><td>5</td><td>6</td></tr>
<tr id="tr3"><td>7</td><td>6</td><td>9</td></tr>
</tbody>
</table>
<script>
var tr=document.querySelector('table.update:first-child tr:first-child');
console.log(tr);
</script>

classでデータを抜くときは複数ヒット可能性を常に意識して下さい

Answer 2

getElementsByClassNameは、「Elements」と複数形になっているように、リストとしてデータが取れてきてしまいます。

1個しかないとわかっているのであれば、document.getElementsByClassName("update")[0];のようにして必要なタグだけを抽出しましょう。