Javascriptでテーブル(表)を動的に作成・表示できるようになった

 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要素の表示・非表示ができるようになった