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

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