HTMLのtableで現在時刻を強調するJavaScript

タイトルが雑。

やりたいことは table の現在時刻と同じ列の td の色を変えることである。

 const today = new Date();
 [...document.querySelectorAll('tr')]
        .filter((tr) => tr.children[0].tagName === "TD" && 
                tr.children[0].textContent.includes(today.getHours() + ":"))
        .forEach((tr) => {
            [...tr.children].forEach((td, index) => {
                    td.style.backgroundColor = "#bee5eb";
                    td.style.borderBottom = "1px solid #86cfda";
            });
        });

現在時刻を取得する

today.getHours();

文字列マッチング

今回は 17:00 のような表記を使うため、マッチングは以下の通りになる。

tr.children[0].textContent.includes(today.getHours() + ":");

17:30 や 17:45 も同時刻とするため 17: を含むかどうかでチェックしている。 より精密な時刻強調をするのは面倒なので今回は手抜き実装。

色を変える

td.style.backgroundColor = "#bee5eb";
td.style.borderBottom = "1px solid #86cfda";

多少工夫して色を変えている。

背景色を #bee5eb ■。 ボーダーラインを #86cfda ■。

table要素にボーダーラインが欲しいなとぃうただそれだけの理由で2つのパラメータを設定している。