ハイライトにする、三回目

2021/04/05

ハイライトにする、三回目

なんだかこの手の記事ばかり書いているような気がする。なるほど、これが色付け係かぁ。などと思ったりした。

今回の場合は、ある列の値がある値ならばその行をハイライトにする、というコード。具体的には、1列目（配列の要素番号としては0）の日付が今日の日付ならハイライトにする。

各行はdocクラスになっており、各要素のdivを持つ。例えば下記のような。

<!-- 1行目 -->
<div class="doc">
   <div><p>2021-4-5</p></div>
   <div><p>00:00:00</p></div>
   <div><p>hoge</p></div>
</div>
<!-- 2行目 -->
<div class="doc">
   <div><p>2021-4-4</p></div>
   <div><p>13:59:00</p></div>
   <div><p>fuga</p></div>
</div>
<!-- 3行目 -->
<div class="doc">
   <div><p>2021-4-4</p></div>
   <div><p>08:14:30</p></div>
   <div><p>にゃーん</p></div>
</div>
<!-- 4行目以降、省略... -->

コードとしては単純でdocのクラス分、ループをまわして子要素の中身を見る。

// 以上、省略
// doc要素を探索
doc_elm = document.getElementsByClassName("doc");
for(let i=1; i<doc_elm.length; i++){
    div_elm = doc_elm[i].getElementsByTagName("div");
    inr_txt = div_elm[col].innerText;
    // =============================================================================
    // 背景色の変更処理
    // =============================================================================
    if(inr_txt == ""){
        // 日付なしの場合の処理を書く
    }else if(inr_txt == getToday()){
        // 当日の場合の処理を書く
    }else if(inr_txt < getToday()){
        // 超過の場合の処理を書く
    }else{
        // それ以外
    }
    // =============================================================================
}
// 以下、省略

getToday()は今日の日付をYYYY-MM-DDで返す関数。

いざ実装しようとしたら、困ったことに色付けを実装する（したい）複数のシステムで日付の要素番号が異なってしまっていた。なので、どこかでシステムを識別して要素番号を与えてやる必要が出てきた。加えて色も変えたい。

ということで、システムの識別にはtitleタグを使用することにした。window.onloadで識別用関数を叩くことにした。色は配列で渡す。

discernSystem = () =>{
    let tle = document.getElementsByTagName("title");
    let sys = tle[0].innerText;
    if(sys == "作業管理システム"){
        colorHighlight(4, ['gold', 'coral', '']);
    }else if(sys == "目標管理システム"){
        colorHighlight(0, ['lemonchiffon', '', '']);
    }else if(sys == "支払記録システム"){
        colorHighlight(0, ['lemonchiffon', '', '']);
    }
}