onClickで選択した行だけハイライトする

2020/09/01

onClickで選択した行だけハイライトする

特定要素のある行をハイライトするよりも簡単にクリックした行だけハイライトにするコードです。

単純にonClickでstyle.backgroundColorで設定しても、別の行をクリックしたときに前の状態（前回クリックしたときの別の行のハイライト）が消えません。

そこで、onClickしたときに一旦すべてのstyleを消します。そのために、セルにidを設定してその子要素（各行）分ループを回してremoveAttributeします。その後、改めてstyle.backgroundColorを設定します。

<div id="body">
    <p id="id1" onClick="test('id1');">test1</p>
    <p id="id2" onClick="test('id2');">test2</p>
    <p id="id3" onClick="test('id3');">test3</p>
    <p id="id4" onClick="test('id4');">test4</p>
</div>

<script>
    function test(id){
        let body_id = document.getElementById("body").children;
        for(let i=0; i<body_id.length; i++){
            body_id[i].removeAttribute('style');
        }
            
        let elements = document.getElementById(id);
        elements.style.backgroundColor = 'skyblue';
    }
</script>