これはブログです

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

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>

コメントを残す

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

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