JavaScriptでテーブルの最終要素を取得したい

概要

JavaScriptでHTMLのテーブルの中の最終要素を取得しるまでの方法を説明する。

実践

以下のHTMLのソースのidfax_3を取得してみる(テーブルの最後の要素)

取得方法は以下の通り

test.js

var trs = $('#jigyosho_list tbody tr');
var td = $(trs[2]).children();
var childTd = $(td[6]).children();
var id = childTd[0].id;

以下解説

trタグを配列で取得

test.js

var trs = $('#jigyosho_list tbody tr');

idjigyosho_listのtbodyタグのtrタグを配列で取得する。trs(tr[0],tr[1],tr[2])

tdタグを配列で取得

test.js

var td = $(trs[2]).children();

最後の項目を取得したいのでtrs[2]を選択し、子要素のtdタグを取得する。
※配列のままではchildrenで子要素を取得できないため、$()で囲って、オブジェクトとみなすようにする必要がある。

tdタグの子要素を配列で取得

test.js

var childTd = $(td[6]).children();

同様に、tdタグの子要素を配列で取得する。

目的のidを取得

test.js

var id = childTd[0].id;

子要素にはinputタグのみなので、childTd[0]でinputタグを取得し、その中のidを取得する。

まとめ

以下のように短縮することも可能で、lengthで要素数を取得することも可能。

test.js

var trs = $('#jigyosho_list tbody tr');
var bottomId = $($(trs[trs.Length - 1]).children()[6]).children()[0].id;