think49/ReadMe.md

## ReadMe.md

      
    Raw
  

              ReadMe.md
            
          
    hover-table-col.js

概要

tableの列指定で :hover 擬似クラスを使用する場合、:nth-col() 擬似クラスを使用したいところですが、2020/05/30現在、Webブラウザの実装が整っていない為、JavaScriptで代替します。
既知の仕様/問題点

必要最低限の実装しかしていませんので、適宜改修が必要です。

セル要素内に子要素が存在し、子要素がhoverされた場合に正しく動作しません。(改善案: 繰り返し処理でセル要素が
現れるまで parentNode を確認します)
セル結合されている場合、論理行/論理列を正しく認識できません。(改善案: 左上のセルから順番に走査していき、各セル要素のcolspan属性値、rowspan属性値を読み取って、論理行/論理列に該当するセル要素を算出します。ただし、3.の問題は残存しています)
要素単位でスタイルを適用する為、結合セルの部分的な論理行/論理列にスタイルを適用する方法がありません。:nth-col() 擬似クラスが実装されるまで、この問題の解消目処は立ちません。

実装手段

:hover 擬似クラス

CSSの :hover 擬似クラスによって、hover時のスタイル適用を実装します。

9.1. ポインタ hover 疑似クラス： :hover - Selectors Level 4 （日本語訳）

:nth-col() 擬似クラス

Webブラウザに実装されれば、tableの列指定に、CSSの :nth-col() 擬似クラスも使用できます。

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

colgroup要素

tableの列指定には、colgroup要素にJavaScriptでCSSスタイルを適用する実装とします。

<colgroup> - HTML: HyperText Markup Language | MDN
4.9.3 colgroup要素 - HTML Standard 日本語訳


## hover-table-col-0.1.0.js
/**
 * hover-table-col.js
 *
 *
 * @version 0.1.0
 * @author think49
 * @url https://gist.github.com/think49/5d5c4a1b4f6e86741b43096055016d1f
 * @license http://www.opensource.org/licenses/mit-license.php (The MIT License)
 */
'use strict';
{
  const handleMouseover = function handleMouseover (event) {
    var cell = event.target;

    switch (cell.tagName) {
      case 'TH':
      case 'TD':
        var table = event.currentTarget, colgroup = table.querySelectorAll('colgroup')[cell.cellIndex];
        console.log(cell, colgroup.className);

        if (colgroup.classList.contains('hover')) return;

        var previousColgroup = table.querySelector('colgroup.hover');

        if (previousColgroup) previousColgroup.classList.remove('hover');

        colgroup.classList.add('hover');
    }
  };

  const handleMouseout = function handleMouseout (event) {
    var previousColgroup = event.currentTarget.querySelector('colgroup.hover');

    if (previousColgroup) previousColgroup.classList.remove('hover');
  };

  for (let table of document.querySelectorAll('table')) {
    table.addEventListener('mouseover', handleMouseover, false);
    table.addEventListener('mouseout', handleMouseout, false);
  }
}

## test-0.1.0.html
<!DOCTYPE html>
<title>test</title>
<style>
  h2 {
    margin: 1em;
  }
  table {
    margin: 1em 3em;
    border-collapse: collapse;
    border: solid 2px black;
  }
  caption {
    font-weight: bold;
  }
  thead {
    border: solid 2px black;
  }
  th, td {
    border: solid 1px black;
    padding: 0.5em;
  }
  th:hover, td:hover {
    color: black;
    background-color: #9f9;
  }
  tr:hover {
    color: black;
    background-color: #99f;
  }
  .hover {
    color: black;
    background-color: #99f;
  }
</style>
<h1>&lt;table&gt; でhoverした列/行にCSSスタイルを適用する</h1>
<h2>サンプル</h2>
<table>
  <caption>table1</caption>
  <colgroup>
  <colgroup>
  <colgroup>
  <thead>
    <tr><th>A</th><th>B</th><th>C</th></tr>
  </thead>
  <tbody>
    <tr><td>A1</td><td>B1</td><td>C1</td></tr>
    <tr><td>A2</td><td>B2</td><td>C2</td></tr>
    <tr><td>A3</td><td>B3</td><td>C3</td></tr>
  </tbody>
</table>
<table>
  <caption>table2</caption>
  <colgroup>
  <colgroup>
  <colgroup>
  <thead>
    <tr><th>A</th><th>B</th><th>C</th></tr>
  </thead>
  <tbody>
    <tr><td>A1</td><td>B1</td><td>C1</td></tr>
    <tr><td>A2</td><td>B2</td><td>C2</td></tr>
    <tr><td>A3</td><td>B3</td><td>C3</td></tr>
    <tr><td>A4</td><td>B4</td><td>C4</td></tr>
  </tbody>
</table>
<script src="./hover-table-col-0.1.0.js"></script>
	/**
	* hover-table-col.js
	*
	*
	* @version 0.1.0
	* @author think49
	* @url https://gist.github.com/think49/5d5c4a1b4f6e86741b43096055016d1f
	* @license http://www.opensource.org/licenses/mit-license.php (The MIT License)
	*/
	'use strict';
	{
	const handleMouseover = function handleMouseover (event) {
	var cell = event.target;

	switch (cell.tagName) {
	case 'TH':
	case 'TD':
	var table = event.currentTarget, colgroup = table.querySelectorAll('colgroup')[cell.cellIndex];
	console.log(cell, colgroup.className);

	if (colgroup.classList.contains('hover')) return;

	var previousColgroup = table.querySelector('colgroup.hover');

	if (previousColgroup) previousColgroup.classList.remove('hover');

	colgroup.classList.add('hover');
	}
	};

	const handleMouseout = function handleMouseout (event) {
	var previousColgroup = event.currentTarget.querySelector('colgroup.hover');

	if (previousColgroup) previousColgroup.classList.remove('hover');
	};

	for (let table of document.querySelectorAll('table')) {
	table.addEventListener('mouseover', handleMouseover, false);
	table.addEventListener('mouseout', handleMouseout, false);
	}
	}
	<!DOCTYPE html>
	<title>test</title>
	<style>
	h2 {
	margin: 1em;
	}
	table {
	margin: 1em 3em;
	border-collapse: collapse;
	border: solid 2px black;
	}
	caption {
	font-weight: bold;
	}
	thead {
	border: solid 2px black;
	}
	th, td {
	border: solid 1px black;
	padding: 0.5em;
	}
	th:hover, td:hover {
	color: black;
	background-color: #9f9;
	}
	tr:hover {
	color: black;
	background-color: #99f;
	}
	.hover {
	color: black;
	background-color: #99f;
	}
	</style>
	<h1><table> でhoverした列/行にCSSスタイルを適用する</h1>
	<h2>サンプル</h2>
	<table>
	<caption>table1</caption>
	<colgroup>
	<colgroup>
	<colgroup>
	<thead>
	<tr><th>A</th><th>B</th><th>C</th></tr>
	</thead>
	<tbody>
	<tr><td>A1</td><td>B1</td><td>C1</td></tr>
	<tr><td>A2</td><td>B2</td><td>C2</td></tr>
	<tr><td>A3</td><td>B3</td><td>C3</td></tr>
	</tbody>
	</table>
	<table>
	<caption>table2</caption>
	<colgroup>
	<colgroup>
	<colgroup>
	<thead>
	<tr><th>A</th><th>B</th><th>C</th></tr>
	</thead>
	<tbody>
	<tr><td>A1</td><td>B1</td><td>C1</td></tr>
	<tr><td>A2</td><td>B2</td><td>C2</td></tr>
	<tr><td>A3</td><td>B3</td><td>C3</td></tr>
	<tr><td>A4</td><td>B4</td><td>C4</td></tr>
	</tbody>
	</table>
	<script src="./hover-table-col-0.1.0.js"></script>