blog.nomadscafe.jp

いやなブログで紹介されているインクリメンタルGrepを利用して、HTMLのテーブルをGrepするものを書いてみた。
なにかしらのデータを表示するとき使えると思われ。

var displaystyle;
function grep (pattern) {

    try {
    
        regex = new RegExp(pattern, "i");
        trs = document.getElementsByTagName('tr');
        for (i = 0; i < trs.length; i++) {
            e = trs[i];
            if (e.className == "line") {
				if(displaystyle == null){
					displaystyle = e.style.display;
				}
		var str = e.innerText || e.innerHTML;
		if (str.match(regex)) {
                    e.style.display = displaystyle;
                } else {
                    e.style.display = "none";
                }
            }
        }
    } catch (e) {
        // 正規表現の文法エラーを無視する
    }
}

ポイントは２つ。
ブラウザごとのCSSのサポート具合が違うので、trのdisplayのstyleが１つに決まらないこと。
IEは、display=block、Safariは、table-rowとなる。いろいろ調べるのは面倒なので、
はじめの検索時に、変数にdisplayのstyleを保存しておくことで対応。

もう１つは、trタグに対する、innerText の動き。
どうも、FireFoxでは空になってしまうもよう。なので、

var str = e.innerText || e.innerHTML;

として対応。

一応IE6、FireFox 1.0.2、Safariで動作確認。