またの思いつきメモ。
「カテゴリー」やら「タグ」やらを持っているデータを表として（実際には違うが）表示したときに、カーソルをあるキーに（マウス）オーバーさせると同じキーのある行をハイライトするコードを書いた。
キーの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>
コメントを残す