Javascript関連情報

更新日：2005年06月28日

Ajax　動的なテーブル書き換え

高橋 登史朗 写真

配列データを、サーバーへ別ファイルとして用意し、ページ構築後の好きなタイミングでAjaxで動的に読み込んでから、テーブル（table）へ流し込んでみます。


動的なテーブル書き換え


  • 2: 手軽にエンコード


    今回のサンプルで'sansu.txt'などに利用した、JavaScriptのencodeURI()メソッドで手軽にエンコードできるページを用意しました。これでエンコードしてサーバーへ置き、受信時にdecodeURL()すれば、MacのSafariやLinuxのkonquerrorでも文字化けせずにAjaxを利用できます。

    とりあえず、ここでは、エンコードされたデータから更に、JSONの配列とオブジェクトで利用される [、]、{、}のエンコードを除外し、軽量化のため、タブと改行と空白を除去しました(ソースは単純ですので、利用する環境などにあわせて、自分用にカスタマイズして使うのも良いかもしれません)。
      まず、上のテキストエリアへもとデータを入力してから下のボタンを押してください。




      ちなみに、前ページサンプルのデータは、次のようにエンコードしてあります。

      エンコード前 
      [
	[ '名前' , '国語' ] ,
	[ '山田' , '12' ] ,
	[ '田中' , '28' ] ,
	[ '中山' , '56' ] ,
	[ '山本' , '98' ] ,
	[ '本井' , '12' ] ,
	[ '井上' , '18' ] ,
	[ '上山' , '48' ] 
]

      エンコード後
      [['%E5%90%8D%E5%89%8D','%E5%9B%BD%E8%AA%9E'],['%E5%B1%B1%E7%94%B0','12'],['%E7%94%B0%E4%B8%AD','28'],['%E4%B8%AD%E5%B1%B1','56'],['%E5%B1%B1%E6%9C%AC','98'],['%E6%9C%AC%E4%BA%95','12'],['%E4%BA%95%E4%B8%8A','18'],['%E4%B8%8A%E5%B1%B1','48']]

      これにkokugo.txtなどの名前をつけて、文字コードは、UTF-8で保存してください。前ページサンプルでは、それを、次の関数setDataで呼び出して処理しています。
      <a href="javascript:void(0)" onmouseover="setData('kokugo.txt')">国語</a>


  • 印刷する
  • ブックマークする
  • 携帯に送る
  • ブログに書く

あわせて読みたい

この記事の担当ガイド

写真

高橋 登史朗

Javascriptをはじめ、Ajax、jQueryの著書多数のガイドが、何かと最近騒がれているJa…

続きを読む

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイド の川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！ さぁ、いますぐチェック！

人気Javascriptランキング

Powered by 価格.com

デジタル関連コミュニティ

愛用の北欧モノ

北欧好きが、愛用の北欧モノを見せ合うコミュニティ

メルマガ登録

【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。

おすすめ厳選サイト

季節特集

特集一覧へ

ショッピングカタログ

All About ウェブマガジン

女性向け

雨が楽しくなる！レイングッズ15

最新特集へ

男性向け

マネしたくなるアイデア住宅

最新特集へ

All Aboutスタイルストア

All Aboutスタイルストア

COCOMO ココロのこもった贈り物。

ギフト、引き出物、誕生日プレゼントに

専門家を探せる、相談できる。

All About モバイル

QRコード

All Aboutがケータイで読める！

オススメ記事をメールでチェック

詳細はこちら

知識・経験を生かして、記事を書いてみませんか？