整理と雑記

気が向いたら書く

【Javascript】チェックボックスに連動してテーブルの背景色を変える

チェックボックスに連動してテーブルの背景色を変える。使用するのはJavascriptとcssのみ。

サンプル

最初に適用したテーブルをサンプルとして載せておく。チェックボックスにマウスオーバーした時とチェックを入れた時に行の背景色が変更、ヘッダーの場合は全体の背景色が変更される。

名前 好きな食べ物 好きな動物
一花 塩辛 カバ
二乃 パンケーキ ウサギ
三玖 抹茶 ハリネズミ
四葉 みかん ラクダ
五月 カンガルー

Javascript・css

使用するJavascriptとcssは以下。各関数の説明は後述。

Javascript

this.tableHighlighter = function(){    
    this.init = function(){
        const tables = document.getElementsByTagName("table");
        for(var i in [...tables]){
            const thead = tables[i].tHead;
            const tbodies = tables[i].tBodies;
            const tbody = [...tbodies].find((tbody) => {return tbody});
            if (thead !== null && tbody !== undefined) {
                theadEvent(thead,tbody);
                tbodyEvent(thead,tbody);
            }
        }
    }

    this.theadEvent = function(thead,tbody){
        const tbodyRows = thead.getElementsByTagName("tr");
        for(var i in [...tbodyRows]){
            const input = findSelectBox(tbodyRows[i]);
            if (input === undefined) {
                continue;
            }
            input.row = i;
            input.onmouseover = function(){
                mouseoverAll(tbody);
            }
            input.onmouseout = function(){
                mouseoutAll(tbody);
            }
            input.onclick = function(){
                clickAll(thead,tbody);
            }
        }
    }

    this.tbodyEvent = function(thead,tbody){
        const tbodyRows = tbody.getElementsByTagName("tr");
        for(var i in [...tbodyRows]){
            const input = findSelectBox(tbodyRows[i]);
            if (input === undefined) {
                continue;
            }
            input.row = i;
            input.onmouseover = function(){
                mouseover(tbody,this.row);
            }
            input.onmouseout = function(){
                mouseout(tbody,this.row);
            }
            input.onclick = function(){
                click(thead,tbody,this.row);
            }
        }
    }

    this.mouseoverAll = function(tbody){
        const tbodyRows = tbody.getElementsByTagName("tr");
        for(var i in [...tbodyRows]){
            highlightRow(tbody,i,"over");
        }
    }

    this.mouseover = function(tbody,i){
        highlightRow(tbody,i,"over");
    }

    this.mouseoutAll = function(tbody){
        const tbodyRows = tbody.getElementsByTagName("tr");
        for(var i in [...tbodyRows]){
            unhighlightRow(tbody,i,"over");
        }
    }

    this.mouseout = function(tbody,i){
        unhighlightRow(tbody,i,"over");
    }

    this.clickAll = function(thead,tbody){
        const theadCheckBox = findSelectBox(thead);
        const tbodyRows = tbody.getElementsByTagName("tr");
        for(var i in [...tbodyRows]){
            const tbodyCheckBox = findSelectBox(tbodyRows[i]);
            tbodyCheckBox.checked = theadCheckBox.checked;
            this.click(thead,tbody,i);
        }
    }

    this.click = function(thead,tbody,i){
        const theadCheckBox = findSelectBox(thead);
        const tbodyCheckBox = findSelectBox(tbody.getElementsByTagName("tr")[i]);
        if (tbodyCheckBox.checked) {
            highlightRow(tbody,i,"selected");
        } else {
            unhighlightRow(tbody,i,"selected");
            theadCheckBox.checked = false;
        }
    }

    this.highlightRow = function(tbody,i,css){
        const tr = tbody.getElementsByTagName("tr")[i];
        const childNodes = tr.childNodes;
        for(const j in childNodes){
            const node = tr.childNodes[j];
            if(node.nodeType == 1) {
                node.classList.add(css);
            }
        }
    }

    this.unhighlightRow = function(tbody,i,css){
        const tr = tbody.getElementsByTagName("tr")[i];
        const childNodes = tr.childNodes;
        for(const j in childNodes){
            const node = tr.childNodes[j];
            if(node.nodeType == 1) {
                node.classList.remove(css);
            }
        }
    }

    this.findSelectBox = function(elm){
        const inputs = elm.getElementsByTagName('input');
        return [...inputs].find((input) => {
            return (input.type === 'checkbox');
        });
    }

    init();
}

css

td.over{background-color:#ecfbd4!important;}
td.selected{background-color:#bce774!important;}

使い方

上記のjavascriptとcssを適用してwindow.onloadでtableHighlighterを読み込む。

window.onload = function() {
    tableHighlighter();
}

各関数の説明

init

tableタグの要素を取得し、背景色を変える関数(theadEvent・tbodyEvent)を実行する。

theadEvent

ヘッダーのチェックボックスに各イベントを設定する。

イベント 関数 概要
onmouseover mouseoverAll テーブルのすべての行の背景色を変更する。
onmouseout mouseoutAll テーブルのすべての行の背景色をリセットする。
onclick clickAll テーブルのすべてのチェックボックスを切り替え、背景色を変更する。
tbodyEvent

tbody配下のチェックボックスに各イベントを設定する。

イベント 関数 概要
onmouseout mouseout マウスオーバーした行の背景色を変更する。
onmouseout mouseout マウスオーバーで変更された背景色をリセットする。
onclick click チェックボックスの状態に合わせて背景色を変更・リセットする。
mouseoverAll

tbody配下すべての要素のクラスに「over」を追加する。overがある要素は背景色が#ecfbd4に変更になる。

mouseover

tbody配下のi番目の要素のクラスに「over」追加する。

mouseoutAll

tbody配下すべての要素のクラスから「over」を削除する。

mouseout

tbody配下のi番目の要素のクラスから「over」を削除する。

clickAll

tbody配下すべてのチェックボックスにチェックを入れてclickを実行する。

click

tbody配下のチェックボックスの状態に合わせて要素のクラスに「seletcted」を追加・削除する。削除する場合はヘッダーのチェックボックスのチェックを外す。overがある要素は背景色が#bce774に変更になる。

highlightRow

tbody配下のi番目の要素にcssで指定されたクラスを追加する。

highlightRow

tbody配下のi番目の要素にcssで指定されたクラス(overかselected)を追加する。

unhighlightRow

tbody配下のi番目の要素からcssで指定されたクラス(overかselected)を削除する。

findSelectBox

inputタグを取得し、typeがcheckboxの最初の要素を返却する。