前回の記事で、JavaScriptを勉強してできるようになったことについて書いた。


その後、もう少し発展的なことができるようになった。
主に、テーブル関係で。

スポンサーリンク

1.今回できるようになったこと

  • 入力された値を他のテキストエリアへ(ほぼ)リアルタイムで反映
  • 入力された値を基にテーブルを自動で生成
  • 入力エリアが空になればテーブルが消える(見えなくなる)



なお、テーブルの生成については、tablecellというプラグインを使用させてもらった。

2.入力された値に応じてテーブルを自動で生成する

  • デモの内容
    • 左側のテキストエリアに入力された値を、自動的に右側のテキストエリア(入力不可)にも表示する
    • テキストエリアに入力された値に対応した九九のテーブルを表示する
    • 入力値が変われば、それに応じてテーブルの表示も変わる



入力は半角数字のみ有効で、PCの性能にもよるが、あまり大きな数字を入力すると、ブラウザがフリーズするので注意(私の環境では300は表示されたが、1000だとフリーズした)。

以下、デモ

×の掛け算表
掛け算表

HTML


JavaScript


スポンサーリンク

3.まとめ

  • ユーザーが入力した値を、ほぼリアルタイムで取得できるようになった
  • テーブルを自動的に生成することができるようになった
  • HTML要素の表示・非表示ができるようになった