<table class="highlight-table">
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
</tr>
<tr>
<th>a</th>
<td>1000</td>
<td>2000</td>
<td>3000</td>
<td>4000</td>
<td>5000</td>
<td>6000</td>
<td>7000</td>
</tr>
<tr>
<th>b</th>
<td>2000</td>
<td>3000</td>
<td>4000</td>
<td>5000</td>
<td>6000</td>
<td>7000</td>
<td>8000</td>
</tr>
<tr>
<th>c</th>
<td>3000</td>
<td>4000</td>
<td>5000</td>
<td>6000</td>
<td>7000</td>
<td>8000</td>
<td>9000</td>
</tr>
<tr>
<th>d</th>
<td>4000</td>
<td>5000</td>
<td>6000</td>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
</tr>
<tr>
<th>e</th>
<td>5000</td>
<td>6000</td>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>11000</td>
</tr>
<tr>
<th>f</th>
<td>6000</td>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>11000</td>
<td>12000</td>
</tr>
<tr>
<th>g</th>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>11000</td>
<td>12000</td>
<td>13000</td>
</tr>
</table>
.highlight-table {
width: 800px;
table-layout: fixed;
border-collapse: collapse;
}
.highlight-table th {
width: 12.5%;
background: #333;
color: #fff;
padding: 8px;
border: 1px solid #555;
}
.highlight-table td {
padding: 8px;
text-align: center;
border: 1px solid #555;
}
.highlight-table .target > td, .highlight-table td.target {
background: #eeeeee;
}
.highlight-table {
width: 800px;
table-layout: fixed;
border-collapse: collapse;
& th {
width: (100% / 8);
background: $color_main;
color: $color_opposite;
padding: $space_sm;
border: 1px solid $color_sub;
}
& td {
padding: $space_sm;
text-align: center;
border: 1px solid $color_sub;
}
& .target > td, & td.target {
background: #eeeeee;
}
}
(function() {
const tdItems = document.querySelectorAll('.highlight-table td');
if(!tdItems) {return;}
const trItems = document.querySelectorAll('.highlight-table tr');
tdItems.forEach(td => {
td.addEventListener('mouseenter', () => {
showHighLight(td);
});
td.addEventListener('mouseleave', () => {
hideHighLight();
});
});
function showHighLight(td) {
td.parentNode.classList.add('target');
let myIndex = Array.prototype.indexOf.call(td.parentNode.children, td);
trItems.forEach(tr => {
tr.children[myIndex].classList.add('target');
});
}
function hideHighLight() {
let targets = document.querySelectorAll('.target');
targets.forEach(target => {
target.classList.remove('target');
});
}
}());