HTMLのtableにマウスポインタをあてると行・列がハイライトされるようにしたい(JavaScript)

Question

前提・実現したいこと

初投稿です。どうぞよろしくお願いします!!
HTMLでテーブルを表示し、マウスポインタがある行と列をハイライト(着色)させたいです。
以下のサイトにあるjavascriptのコードを参考に実装を試みました。
https://so-zou.jp/web-app/tech/programming/javascript/dom/node/element/html/table/#no9

発生している問題・エラーメッセージ

colgroupなどを設定し試みたのですが、どうしても期待通りに動作しません。
以下、現在の状況です。
https://gyazo.com/c7bb48b3edcd485fcd9321ba0c69dc54

該当のソースコード

 %table#home-table.home-table
      %colgroup{:span => 5}
      %tbody
        %tr
          %th.no{:rowspan => 2} No
          %th.name{:rowspan => 2} Name
          %th.pts{:rowspan => 2} PTS
          %th.fg{:colspan => 3} FG
          %th.twop{:colspan => 3} 2P
          %th.threep{:colspan => 3} 3P
          %th.ft{:colspan => 3} FT
          %th.reb{:colspan => 3} REB
          %th.as{:rowspan => 2} AS
          %th.to{:rowspan => 2} TO
          %th.st{:rowspan => 2} ST
          %th.bs{:rowspan => 2} BS
          %th.pf{:rowspan => 2} PF
        %tr
          %th.fgm M
          %th.fga A
          %th.fgp %
          %th.twopm M
          %th.twopa A
          %th.twopp %
          %th.threepm M
          %th.threepa A
          %th.threepp %
          %th.ftm M
          %th.fta A
          %th.ftp %
          %th.or OR
          %th.dr DR
          %th.ttlreb Total
        - (1..18).each do |i|
          %tr
            %td.darkblue= 0
            %td.darkblue 山田太郎
            %td.blue= 0
            %td.blue= 0
            %td.blue= 0
            %td.blue= 0
            %td.lightblue= 0
            %td.lightblue= 0
            %td.blue= 0
            %td.lightblue= 0
            %td.lightblue= 0
            %td.blue 100%
            %td.lightblue= 0
            %td.lightblue= 0
            %td.blue= 0
            %td.lightblue= 0
            %td.lightblue= 0
            %td.blue= 0
            %td.lightblue= 0
            %td.lightblue= 0
            %td.lightblue= 0
            %td.lightblue= 0
            %td.lightblue= 0

window.addEventListener( "DOMContentLoaded", function(){
var TARGET_CLASS = 'home-table';
    var CELL_COLOR = 'gray';
    
    var tables = document.body.getElementsByTagName( 'table' );
    console.log(tables);
    for( var i = 0; i < tables.length; i++ )
    {
        if( tables[ i ].className.indexOf( TARGET_CLASS ) != -1 )
        {
            AttachHighlighting( tables[ i ] );
        }
    }
    
    
    function AttachHighlighting( table )
    {
        for( var i = 0; i < table.rows.length; i++ )
        {
            var cells = table.rows[ i ].cells;
            for( var k = 0; k < cells.length; k++ )
            {
                var cell = cells[ k ];
                if( cell.tagName != 'th' )
                {
                    cell.onmouseover = function()
                    {
                        var row = this.parentNode;
                        var table = row.parentNode.parentNode;
                        var cols = table.getElementsByTagName( 'col' );
    
                        for( var i = 0; i < row.cells.length; i++ )
                        {
                            cols[ i ].style.backgroundColor
                                = ( row.cells[ i ] == this )? CELL_COLOR : '';
                        }
    
                        for( var i = 0; i < table.rows.length; i++ )
                        {
                            table.rows[ i ].style.backgroundColor
                                = ( table.rows[ i ] == row )? CELL_COLOR : '';
                        }
                    }
                }
            }
        }
    
        var colgroups = table.getElementsByTagName( 'colgroup' );
        for( var i = 0; i < colgroups.length; i++ )
        {
            var colgroup = colgroups[ i ];
            var cols = colgroup.getElementsByTagName( 'col' );
    
            for( var k = cols.length; k < colgroup.span; k++ )
            {
                var col = document.createElement( 'col' );
                colgroup.appendChild( col );
            }
        }
    
        table.onmouseout = function()
        {
            var cols = this.getElementsByTagName( 'col' );
            for( var i = 0; i < cols.length; i++ )
            {
                cols[ i ].style.backgroundColor = '';
            }
    
            for( var i = 0; i < this.rows.length; i++ )
            {
                this.rows[ i ].style.backgroundColor = '';
            }
        }
    }
    
    }, false );

メッセージ

非常に初歩的なところだと思いますが、何時間もつまづいてしまいました。
どなたかもしよければお願いします!

Comments

[think49]

コード以外の本文を「コードブロック」で括らないで下さい。
コードブロックの言語名は正しく書いてください。

Answer 1

:hover 擬似クラス

CSSの :hover で実装可能ですが、JavaScriptでなければならない理由があるのでしょうか。

• :hover - CSS: カスケーディングスタイルシート | MDN
• 9.1. ポインタ hover 疑似クラス： :hover - Selectors Level 4 （日本語訳）

:nth-col() 擬似クラス

:nth-col() 疑似クラスの実装が整っていない為ですか。

• 15.2. :nth-col() 疑似クラス - Selectors Level 4 （日本語訳）

簡易サンプル

興が乗ったので、簡易サンプルを書きました。

• hover-table-col.js - GitHub Gist

※あくまで簡易なので、改善の余地が残っていますが、コード制作依頼に応じるつもりはありません。

• 推奨していない質問｜teratail（テラテイル）

Re: uuuuta さん

Answer 2

中心そのものの色の書き換えを忘れてました。

/*
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Table Cross Cursor</title>
<body>
*/
<script>

function work (e, c) { e.style.background = c;}
function* toRight (e) { while (e) yield e = e.nextElementSibling }
function* toLeft (e) { while (e) yield e = e.previousElementSibling }
function* toTop (e) {
  let i = e.cellIndex, p = e.parentNode;
  while (p = p.previousElementSibling) yield p.cells[i]
}
function* toBottom (e) {
  let i = e.cellIndex, p = e.parentNode;
  while (p = p.nextElementSibling) yield p.cells[i]
}


//________________________________

class Color {
  constructor (red = 0, green = 0, blue = 0, a = -1) {
    this.r = red; this.g = green; this.b = blue; this.a = a;
  }
  get color () { return this.a === -1 ? 'transparent': `rgba(${this.r},${this.g},${this.b},${this.a})`}
  copy () { return new Color (this.r, this.g, this.b, this.a) }
}


//________________________________

class Cell {
  constructor (work, way, gain = 1, c = new Color) {
    this.work = work;
    this.way  = way;
    this.gain = gain;
    this.color = c;
    this.life = 1;

    this.action ();
  }

  action () {
    let e = this.way.next().value;
    if (e) {
      this.work (e, this.color.color);
      this.life *= this.gain;
      this.color.a *= this.gain;
      if (0.01 < this.life)
        this.action ();
    }
  }
}

//________________________________

class CrossCursor {
  constructor (table, gain = .8, ...c) {
    let n = c.length, [t,r,b,l] = c || [];
    if (1 > n) throw new Error;
    this.table = table;
    this.buf = null;
    this.gain = gain;
    this.color = [[],[t,t,t,t],[t,r,t,r],[t,r,b,r], c][n];

    table.addEventListener ('mousemove', this, false);
  }

  setColor (event) {
    let
      g = this.gain,
      [t,r,b,l] = this.color, e;

    if (e = this.buf) {
      new Cell (work, toTop(e),   g);
      new Cell (work, toRight(e), g);
      new Cell (work, toBottom(e),g);
      new Cell (work, toLeft(e),  g);
    }
    this.buf = e = event.target;
    new Cell (work, toTop(e),     g, t.copy());
    new Cell (work, toRight(e),   g, r.copy());
    new Cell (work, toBottom(e),  g, b.copy());
    new Cell (work, toLeft(e),    g, l.copy());
  }

  handleEvent (event) {
    if ('TD' === event.target.nodeName)
      this.setColor (event);
  }
}

//________________________________
//demo

for (let i = 0; i < 4; i++) {
  let table = document.body.appendChild (document.createElement ('table')), X = 20, Y = 30;
  for (let y = 0; y < Y; y++) {
    let tr = table.insertRow ();
    for (let x = 0; x < X; x++) {
      tr.insertCell ().textContent = `(${x},${y})`;
    }
  }
  table.border=1;
}

let [a,b,c,d] = document.querySelectorAll ('table');
let colors = [new Color (0,255,0,1), new Color (255,255,0,1), new Color(255,0,0,1), new Color (0,0,255,1)];
new CrossCursor (a, 1, colors[0]);
new CrossCursor (b, .8, ...colors.slice (0,2));
new CrossCursor (c, .6, ...colors.slice (0,3));
new CrossCursor (d, .4, ...colors.slice (0,4));

</script>

Answer 3

~~ほかにもあるかもしれませんが、
とりあえずgetElementsByTagName('col');が間違いだと思われます。

<col>というタグは、<table>には存在しないはずです。~~

上記、間違いでしたので訂正します。phper.kさんのご指摘の通り、<col>タグは存在します。

---

行をホバーしたときに色を変えるならならCSSだと、以下のソースコードで済みます。

.home-table tr:hover {
  background: #f00;
}

Comments

[phper.k]

http://www.htmq.com/html5/col.shtml

[new1ro]

ご指摘ありがとうございます！ 回答訂正しました