質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

ポインタ

ポインタはアドレスを用いてメモリに格納された値を"参照する"変数です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

3回答

2163閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

ポインタ

ポインタはアドレスを用いてメモリに格納された値を"参照する"変数です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/05/30 09:13

編集2022/01/12 10:55

前提・実現したいこと

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

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

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

該当のソースコード

haml

1 %table#home-table.home-table 2 %colgroup{:span => 5} 3 %tbody 4 %tr 5 %th.no{:rowspan => 2} No 6 %th.name{:rowspan => 2} Name 7 %th.pts{:rowspan => 2} PTS 8 %th.fg{:colspan => 3} FG 9 %th.twop{:colspan => 3} 2P 10 %th.threep{:colspan => 3} 3P 11 %th.ft{:colspan => 3} FT 12 %th.reb{:colspan => 3} REB 13 %th.as{:rowspan => 2} AS 14 %th.to{:rowspan => 2} TO 15 %th.st{:rowspan => 2} ST 16 %th.bs{:rowspan => 2} BS 17 %th.pf{:rowspan => 2} PF 18 %tr 19 %th.fgm M 20 %th.fga A 21 %th.fgp % 22 %th.twopm M 23 %th.twopa A 24 %th.twopp % 25 %th.threepm M 26 %th.threepa A 27 %th.threepp % 28 %th.ftm M 29 %th.fta A 30 %th.ftp % 31 %th.or OR 32 %th.dr DR 33 %th.ttlreb Total 34 - (1..18).each do |i| 35 %tr 36 %td.darkblue= 0 37 %td.darkblue 山田太郎 38 %td.blue= 0 39 %td.blue= 0 40 %td.blue= 0 41 %td.blue= 0 42 %td.lightblue= 0 43 %td.lightblue= 0 44 %td.blue= 0 45 %td.lightblue= 0 46 %td.lightblue= 0 47 %td.blue 100% 48 %td.lightblue= 0 49 %td.lightblue= 0 50 %td.blue= 0 51 %td.lightblue= 0 52 %td.lightblue= 0 53 %td.blue= 0 54 %td.lightblue= 0 55 %td.lightblue= 0 56 %td.lightblue= 0 57 %td.lightblue= 0 58 %td.lightblue= 0

Javascript

1window.addEventListener( "DOMContentLoaded", function(){ 2var TARGET_CLASS = 'home-table'; 3 var CELL_COLOR = 'gray'; 4 5 var tables = document.body.getElementsByTagName( 'table' ); 6 console.log(tables); 7 for( var i = 0; i < tables.length; i++ ) 8 { 9 if( tables[ i ].className.indexOf( TARGET_CLASS ) != -1 ) 10 { 11 AttachHighlighting( tables[ i ] ); 12 } 13 } 14 15 16 function AttachHighlighting( table ) 17 { 18 for( var i = 0; i < table.rows.length; i++ ) 19 { 20 var cells = table.rows[ i ].cells; 21 for( var k = 0; k < cells.length; k++ ) 22 { 23 var cell = cells[ k ]; 24 if( cell.tagName != 'th' ) 25 { 26 cell.onmouseover = function() 27 { 28 var row = this.parentNode; 29 var table = row.parentNode.parentNode; 30 var cols = table.getElementsByTagName( 'col' ); 31 32 for( var i = 0; i < row.cells.length; i++ ) 33 { 34 cols[ i ].style.backgroundColor 35 = ( row.cells[ i ] == this )? CELL_COLOR : ''; 36 } 37 38 for( var i = 0; i < table.rows.length; i++ ) 39 { 40 table.rows[ i ].style.backgroundColor 41 = ( table.rows[ i ] == row )? CELL_COLOR : ''; 42 } 43 } 44 } 45 } 46 } 47 48 var colgroups = table.getElementsByTagName( 'colgroup' ); 49 for( var i = 0; i < colgroups.length; i++ ) 50 { 51 var colgroup = colgroups[ i ]; 52 var cols = colgroup.getElementsByTagName( 'col' ); 53 54 for( var k = cols.length; k < colgroup.span; k++ ) 55 { 56 var col = document.createElement( 'col' ); 57 colgroup.appendChild( col ); 58 } 59 } 60 61 table.onmouseout = function() 62 { 63 var cols = this.getElementsByTagName( 'col' ); 64 for( var i = 0; i < cols.length; i++ ) 65 { 66 cols[ i ].style.backgroundColor = ''; 67 } 68 69 for( var i = 0; i < this.rows.length; i++ ) 70 { 71 this.rows[ i ].style.backgroundColor = ''; 72 } 73 } 74 } 75 76 }, false ); 77

メッセージ

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2020/05/30 09:23

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

回答3

0

:hover 擬似クラス

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

:nth-col() 擬似クラス

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

簡易サンプル

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

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

Re: uuuuta さん

投稿2020/05/30 09:21

編集2020/05/30 12:04
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

js

1/* 2<!DOCTYPE html> 3<meta charset="UTF-8"> 4<title>Table Cross Cursor</title> 5<body> 6*/ 7<script> 8 9function work (e, c) { e.style.background = c;} 10function* toRight (e) { while (e) yield e = e.nextElementSibling } 11function* toLeft (e) { while (e) yield e = e.previousElementSibling } 12function* toTop (e) { 13 let i = e.cellIndex, p = e.parentNode; 14 while (p = p.previousElementSibling) yield p.cells[i] 15} 16function* toBottom (e) { 17 let i = e.cellIndex, p = e.parentNode; 18 while (p = p.nextElementSibling) yield p.cells[i] 19} 20 21 22//________________________________ 23 24class Color { 25 constructor (red = 0, green = 0, blue = 0, a = -1) { 26 this.r = red; this.g = green; this.b = blue; this.a = a; 27 } 28 get color () { return this.a === -1 ? 'transparent': `rgba(${this.r},${this.g},${this.b},${this.a})`} 29 copy () { return new Color (this.r, this.g, this.b, this.a) } 30} 31 32 33//________________________________ 34 35class Cell { 36 constructor (work, way, gain = 1, c = new Color) { 37 this.work = work; 38 this.way = way; 39 this.gain = gain; 40 this.color = c; 41 this.life = 1; 42 43 this.action (); 44 } 45 46 action () { 47 let e = this.way.next().value; 48 if (e) { 49 this.work (e, this.color.color); 50 this.life *= this.gain; 51 this.color.a *= this.gain; 52 if (0.01 < this.life) 53 this.action (); 54 } 55 } 56} 57 58//________________________________ 59 60class CrossCursor { 61 constructor (table, gain = .8, ...c) { 62 let n = c.length, [t,r,b,l] = c || []; 63 if (1 > n) throw new Error; 64 this.table = table; 65 this.buf = null; 66 this.gain = gain; 67 this.color = [[],[t,t,t,t],[t,r,t,r],[t,r,b,r], c][n]; 68 69 table.addEventListener ('mousemove', this, false); 70 } 71 72 setColor (event) { 73 let 74 g = this.gain, 75 [t,r,b,l] = this.color, e; 76 77 if (e = this.buf) { 78 new Cell (work, toTop(e), g); 79 new Cell (work, toRight(e), g); 80 new Cell (work, toBottom(e),g); 81 new Cell (work, toLeft(e), g); 82 } 83 this.buf = e = event.target; 84 new Cell (work, toTop(e), g, t.copy()); 85 new Cell (work, toRight(e), g, r.copy()); 86 new Cell (work, toBottom(e), g, b.copy()); 87 new Cell (work, toLeft(e), g, l.copy()); 88 } 89 90 handleEvent (event) { 91 if ('TD' === event.target.nodeName) 92 this.setColor (event); 93 } 94} 95 96//________________________________ 97//demo 98 99for (let i = 0; i < 4; i++) { 100 let table = document.body.appendChild (document.createElement ('table')), X = 20, Y = 30; 101 for (let y = 0; y < Y; y++) { 102 let tr = table.insertRow (); 103 for (let x = 0; x < X; x++) { 104 tr.insertCell ().textContent = `(${x},${y})`; 105 } 106 } 107 table.border=1; 108} 109 110let [a,b,c,d] = document.querySelectorAll ('table'); 111let 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)]; 112new CrossCursor (a, 1, colors[0]); 113new CrossCursor (b, .8, ...colors.slice (0,2)); 114new CrossCursor (c, .6, ...colors.slice (0,3)); 115new CrossCursor (d, .4, ...colors.slice (0,4)); 116 117</script> 118 119

投稿2020/05/31 00:47

編集2020/05/31 01:23
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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


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

CSS

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

投稿2020/05/30 09:49

編集2020/05/30 22:51
new1ro

総合スコア4528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

new1ro

2020/05/30 22:49

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問