スポンサードリンク


テーブル情報を二次元配列に格納!jQueryで簡単にセル値を取得する方法!

jQuery テーブル情報

ウェブサイト作っていると、tableタグの値を自由に操作したい場面がちょくちょくある。

特にある行の値をすべて取得したいときや、列単位で値を取得するなど、

どういうロジックで値を取得しようか迷うときがある。

 

id値を指定できるならとても簡単ですが・・・

行ならtrタグに各行の識別ができるようなidを割り当ててやればいい。

単純に1行目ならid=”row-1″と指定すれば、jQueryなど使って取得することができる。

列ならtdタグにid=”column-1″みたいな指定をすれば、簡単ですね。

この辺りはfor文など使って、列と行の番号をそれぞれ付与していけばいいのですが、

id値など設定していないtableタグから値を引っ張りたいとき、どうすればいいのだろうか?

 

jQueryで簡単にセル値を取得する方法!

そもそもtableって構造的には行と列の構成である。

なので、二次元配列がぱっと思いつきますよね。

 

ということでセルの値を単純に二次元配列化すればいいってこと。

 

ソースコードの解説!

まず2行目でテーブルのtrを指定します。

その後、for文によって、tr値を順番に評価していきます。

上から順番にtr行を検索していく仕組みですね。

 

スポンサードリンク

 

4行目ではtrタグ内の子のタグ、つまりtdタグを配列化します。

children()関数がとっても便利。

プログラム組んでいると、とても重宝するんですよ、これが。

 

再びfor文で配列の要素分ループ処理を行い、tdタグに囲まれた値を取得するロジックです。

最終的に二次元配列の変数dataに代入して終了って感じです。

あとは取得したテーブル情報を好きないように操作することができます。

例えば、ソートしてから再びテーブルに出力することだって可能。

 

このサンプルのプログラムでは、8行目でtext()を指定していますが、

これは文字列のみを取得する関数となります。

 

tdタグ内に別のHTMLタグを記述している場合は、

上記のようにhtml()関数に置き換えましょう。

 

言語がPHPならforeach文でもっとシンプルに処理も高速で実装できるんだけどね。

JavaScriptはforeachないんだよね・・・。

しかし、PHPだと動的処理ができないから、HTMLのソースコードから値を持ってくるってことができないんですよね。

まあ、ajax使って、外部PHPにtableタグの情報を渡して、処理させる手もあるんですが・・・。

そこまでするほどのものでもないですしね。

The following two tabs change content below.
よっき
パソコンが大好きな青年。職業はプログラマ。 幼少期からパソコンが好きで、趣味がそのまま仕事になりました。 主にウェブ系コンテンツの開発が中心です。 自作PCの魅力に惹かれたのは学生時代の頃で、現在に至ります。 自作PC専門ブログで、お得な情報を紹介しています。 趣味はホームページ制作かな。起業を夢見て奮闘中の毎日!

スポンサードリンク


コメントを残す




*

このページの先頭へ