スポンサードリンク


テーブル情報を二次元配列に格納!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専門ブログで、お得な情報を紹介しています。 趣味はホームページ制作かな。起業を夢見て奮闘中の毎日!

      スポンサードリンク


      コメントを残す




      *

      このページの先頭へ