TABLEのTD要素をJavaScript配列にキャッシュする。

jQuery で HTML TABLEタグの TR を列挙するコード。

$('#tbl tr').each(function(i, tr) {
    console.log(i + ' : ' + $(tr).index());
}

※対象テーブルに id="tbl" をわり振ってるイメージ。

さらに、TR の中の TD を列挙するコード

$('#tbl tr').each(function(i, tr) {
    console.log(i + ' : ' + $(tr).index());
    $(this).find('td').each(function(i, td) {
        console.log(i + ' - ' + $(td).index());
    });
});

単純に列挙したいんじゃ無くて、自分としてやりたいことは TABLE の CELL としての TD の位置情報をキャッシュしたいんで TD の配列として取り出したいのな。
ちょっと格好つけて map を使ってやってみよう！・・・ってな、欲をかいた結果書いたコードが↓これ。

$('#tbl tr').each(function(i, tr) {
    var tds = $(this).find('td').map(function(i, td) {
        return $(td).index();
    });
    console.log(tds);
});

実行結果が

ズームしたらこんな感じ。

この書き方やとあんまり意味のワカラン制御用の要素まで列挙してまうらしい。なので、map の違う書き方でアプローチする。

$('#tbl tr').each(function(i, tr) {
    var tds = $.map($(this).find('td'), function(td) {
        return $(td).index();
    });
    console.log(tds);
});

実行結果。

ばっちり。
当然ながら index の配列なんか作ってもなんもありがたいことがないんで、きっちり欲しい形でキャッシュを作り出す。

$('#tbl tr').each(function(i, tr) {
    var tds = $.map($(tr).find('td'), function(td) {
        var $td = $(td);
        var left = $td.position().left;
        var top = $td.position().top;
        var width = $td.css('width');
        var height = $td.css('height');                        
        return {
            'cell' : $(td),
            left : left,
            top : top,
            width : width,
            height : height
        };
    });
    console.log(tds);
});

実行結果は↓こんな感じ。

最後にきちんと行の配列にして、２次元配列の形にしてみる。

var cache = [];
$('#tbl tr').each(function(i, tr) {
    var tds = $.map($(tr).find('td'), function(td) {
        var $td = $(td);
        var left = $td.position().left;
        var top = $td.position().top;
        var width = $td.css('width');
        var height = $td.css('height');
        return {
            left : left,
            top : top,
            width : width,
            height : height
        };
    });
    cache.push(tds);
});

※JSON 化するために CELL の実体は含めてない。（実際に使うときには当然キャッシュするけど）

取り出すときは２次元配列のイメージで row / col 指定。

var cell = cache[3][3];
console.log(JSON.stringify(cell));

実行結果は↓こんな感じ。

ノッてきたんで、もう一山やっときたいとこやけど２５時３０なんでそろそろ寝ないとな。
後はキーボードイベントをエエ感じに処理してうまく行ったら、最後に SignalR の実験や。
まあ、もうちょっと先は長い。