15,400 total views, 17 views today
前回の記事で、JavaScriptを勉強してできるようになったことについて書いた。
その後、もう少し発展的なことができるようになった。
主に、テーブル関係で。
1.今回できるようになったこと
- 入力された値を他のテキストエリアへ(ほぼ)リアルタイムで反映
- 入力された値を基にテーブルを自動で生成
- 入力エリアが空になればテーブルが消える(見えなくなる)
なお、テーブルの生成については、tablecellというプラグインを使用させてもらった。
2.入力された値に応じてテーブルを自動で生成する
- デモの内容
- 左側のテキストエリアに入力された値を、自動的に右側のテキストエリア(入力不可)にも表示する
- テキストエリアに入力された値に対応した九九のテーブルを表示する
- 入力値が変われば、それに応じてテーブルの表示も変わる
※入力は半角数字のみ有効で、PCの性能にもよるが、あまり大きな数字を入力すると、ブラウザがフリーズするので注意(私の環境では300は表示されたが、1000だとフリーズした)。
スポンサーリンク
以下、デモ
×の掛け算表
HTML
×の掛け算表
掛け算表
JavaScript
jQuery('table').hide(); jQuery("#contents").on('keyup blur', function() { if (!(jQuery('#kakezan').val() === "")) { var ka = jQuery('#kakezan').val(); //入力値取得 jQuery("#text_area").val(ka); var pka = []; var pka2 = []; for (var n = 0; n < ka; n++) { pka.push(n); } for (var m = 1; m < pka.length + 1; m++) { pka2.push(m); } var kl = pka.length; var pd = []; var data = [pd]; var j_gr = []; for (var i = 1; i < kl + 1; i++) { pd.push({value: i, attr: {class: 'midashi'}}); for (var j = 1; j < kl + 2; j++) { var c = i * j; if ((j - 1) == ka) { pd.push('<tr><>/tr'); } else { pd.push({value: c, attr: {class: 'cell'}}); } } } pka2.unshift('九九') var header = [pka2]; jQuery('#itiran') .find('thead').tableCell(header, true).end() .find('tbody').tableCell(data); jQuery('table').show(); } else { jQuery("#text_area").val(""); } });
3.まとめ
- ユーザーが入力した値を、ほぼリアルタイムで取得できるようになった
- テーブルを自動的に生成することができるようになった
- HTML要素の表示・非表示ができるようになった