Skip to content

Instantly share code, notes, and snippets.

@think49

think49/ReadMe.md

Last active May 30, 2020 12:21
Show Gist options
  • Save think49/5d5c4a1b4f6e86741b43096055016d1f to your computer and use it in GitHub Desktop.
Save think49/5d5c4a1b4f6e86741b43096055016d1f to your computer and use it in GitHub Desktop.
Download ZIP
hover-table-col.js
Raw
ReadMe.md

hover-table-col.js

概要

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

既知の仕様/問題点

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

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

実装手段

:hover 擬似クラス

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

:nth-col() 擬似クラス

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

colgroup要素

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

Raw
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);
}
}
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment