これはブログです

3DCGとかプログラミングとか

特定要素のある行をハイライト

またの思いつきメモ。

「カテゴリー」やら「タグ」やらを持っているデータを表として(実際には違うが)表示したときに、カーソルをあるキーに(マウス)オーバーさせると同じキーのある行をハイライトするコードを書いた。

キーのspanにはすべて同じclassをつけます。関数の引数にキーを入れて内部でループ、要素にキーがあった(nullではなかった)ら親要素のidを取得してbackgroundColorを変えています。

データはプログラムで生成する(手打ちするわけではない)ので、コードが長くなってもいいかな?とは思いましたが、もう少し賢いやり方がある気がします。

function onMouseFnc(str, mode){
    var elements = document.getElementsByClassName("test");
    for(var i=0; i<elements.length; i++){
        if(elements[i].innerHTML.match(str) != null){
            var parent = elements[i].parentNode;
            if(mode == "over"){
                parent.style.backgroundColor = 'skyblue';
            }else{
                parent.style.backgroundColor = 'transparent';
            }
        }
    }
}
<div id = "id0">
    <p>
        <span>id</span>
        <span>ctg</span>
        <span>tag</span>
        <span>memo</span>
    </p>
</div>
<div id = "id1" class="id">
    <p>
        <span>id1</span>
        <span class = "test" onmouseover="onMouseFnc('hoge1', 'over');" onmouseout="onMouseFnc('hoge1', 'out');">hoge1</span>
        <span class = "test" onmouseover="onMouseFnc('fuga3', 'over');" onmouseout="onMouseFnc('fuga3', 'out');">fuga3</span>
        <span>テスト、その1</span>
    </p>
</div>
<div id = "id2" class="id">
    <p>
        <span>id2</span>
        <span class = "test" onmouseover="onMouseFnc('hoge2', 'over');" onmouseout="onMouseFnc('hoge2', 'out');">hoge2</span>
        <span class = "test" onmouseover="onMouseFnc('fuga1', 'over');" onmouseout="onMouseFnc('fuga1', 'out');">fuga1</span>
        <span>テスト、その2</span>
    </p>
</div>
<div id = "id3" class="id">
    <p>
        <span>id3</span>
        <span class = "test" onmouseover="onMouseFnc('hoge3', 'over');" onmouseout="onMouseFnc('hoge3', 'out');">hoge3</span>
        <span class = "test" onmouseover="onMouseFnc('fuga2', 'over');" onmouseout="onMouseFnc('fuga2', 'out');">fuga2</span>
        <span>テスト、その3</span>
    </p>
</div>
<div id = "id4" class="id">
    <p>
        <span>id4</span>
        <span class = "test" onmouseover="onMouseFnc('hoge1', 'over');" onmouseout="onMouseFnc('hoge1', 'out');">hoge1</span>
        <span class = "test" onmouseover="onMouseFnc('fuga2', 'over');" onmouseout="onMouseFnc('fuga2', 'out');">fuga2</span>
        <span>テスト、その4</span>
    </p>
</div>
<div id = "id5" class="id">
    <p>
        <span>id5</span>
        <span class = "test" onmouseover="onMouseFnc('hoge2', 'over');" onmouseout="onMouseFnc('hoge2', 'out');">hoge2</span>
        <span class = "test" onmouseover="onMouseFnc('fuga3', 'over');" onmouseout="onMouseFnc('fuga3', 'out');">fuga3</span>
        <span>テスト、その5</span>
    </p>
</div>
<div id = "id6" class="id">
    <p>
        <span>id6</span>
        <span class = "test" onmouseover="onMouseFnc('hoge3', 'over');" onmouseout="onMouseFnc('hoge3', 'out');">hoge3</span>
        <span class = "test" onmouseover="onMouseFnc('fuga1', 'over');" onmouseout="onMouseFnc('fuga1', 'out');">fuga1</span>
        <span>テスト、その6</span>
    </p>
</div>

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください