2019/04/22(月)WebFormでDOMを扱う

ページ内にGridViewが複数あり、一番上のGridViewに表示されたセルのテキストをクリックすると、2番目、3番目のGridView内の同じテキストをハイライトしたい(テキストコピーしてCTRL+Fでページ内検索していたがコピーペーストが面倒)という非常にレアなシチュエーション。
WebFormでjQueryや他のライブラリ使うよりは直接DOMの配列ぐるぐる回した方が楽そう。
<script type="text/javascript">
    function highlightKeyword(keyword) {
        var tbls = document.getElementsByTagName("table");
        // 一番上のテーブルを除く全てのテーブルの全ての行の全てのセル内を置換
        for (var i = 1; i < tbls.length; i++) {
            for (var j = 1; j < tbls[i].rows.length; j++) {
                for (var k = 0; k < tbls[i].rows[j].cells.length; k++) {
                    var str = tbls[i].rows[j].cells[k].innerHTML;
                    // 既にタグが付いてるかも知れないので削除してから追加
                    tbls[i].rows[j].cells[k].innerHTML = str.replace('<span style="background: yellow;">', '').replace('</span>', '').replace(keyword, '<span style="background: yellow;">' + keyword + '</span>');
                }
            }
        }
    }
</script>
OK キャンセル 確認 その他