<input type="hidden" /> の値を見やすく表示するデバッグ用の JavaScript ライブラリ

  フォームの <input type="hidden" /> の値をテーブルで見やすく表示するライブラリ HiddenView というのを作ってみました．
  いちいちソースを確認して，値が入っているか確認するのが面倒な人用．他の JavaScript ライブラリは必要としません．

- 使い方
  HiddenView.js を読み込んで，onload イベントで new HiddenView(); をしてください．これだけ．

<script type="text/javascript" src="HiddenView.js"></script>
<script type="text/javascript">
window.onload = function() {
  new HiddenView();
};
</script>

- 表示サンプル
  

  ユーザ登録画面で，項目を入力してもらって，その確認画面というイメージ．上部の灰色のテーブル部分が実際の確認画面．
  下部の青色のテーブルが <input type="hidden" /> の値を示しています．
  
  この例では，テーブルにスタイルを指定しているので，この様な表示になっています．
  テーブルに hv-table というクラス名をつけていますので，自由にスタイルを決めることができます．

- ソース
  最下部でダウンロードできるようにしてありますが，一応ソース自体を載せておきます．

var HiddenView = function() {
    this.initialize();
};
HiddenView.prototype = {
    initialize: function() {
        var input = document.getElementsByTagName('input');
        var table = document.createElement('table');
        var tbody = document.createElement('tbody');
        
        var row = this.createRow([ 'Name', 'Value' ], true);
        tbody.appendChild(row);
        
        for (var i = 0, len = input.length; i < len; ++i) {
            if (input[i].type == 'hidden') {
                var row = this.createRow([ input[i].name, input[i].value ]);
                tbody.appendChild(row);
            }
        }
        table.appendChild(tbody);
        table.className = 'hv-table';
        table.setAttribute('class', 'hv-table');
        document.getElementsByTagName('body').item(0).appendChild(table);
    },
    createRow: function(values, header) {
        var row = document.createElement('tr');
        for (var i = 0, len = values.length; i < len; ++i) {
            var col = document.createElement(header ? 'th' : 'td');
            col.appendChild(document.createTextNode(values[i]));
            row.appendChild(col);
        }
        return row;
    }
};

  やっていることはシンプルで，input 要素の type 属性の値が hidden のものを探してきて，テーブルを作っています．

- ダウンロード
  http://pocari.org/tools/HiddenView/HiddenView.zip

  上記サンプルで表示してあるスタイルシートも同梱しています．
  一応，Firefox 2.0，IE 6.0, Opera 9.02 (いずれも OS は Windows XP) で動作確認しています．

- ライセンス
  MIT ライセンスにします．同梱しているスタイルシートについては著作権は主張しません．