<HTML>
<body>
<link type="text/css" rel="stylesheet" href="bagua.css">
<table id="bagua-table">
<tr>
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
</tr>
<tr>
<td class="nw"><strong>Northwest</strong>
<br>Metal
<br>Silver
<br>Elders
</td>
<td class="n"><strong>North</strong>
<br>Water
<br>Blue
<br>Change
</td>
<td class="ne"><strong>Northeast</strong>
<br>Earth
<br>Yellow
<br>Direction
</td>
</tr>
<tr>
<td class="w"><strong>West </strong>
<br>Metal
<br>Gold
<br>Youth
</td>
<td class="c"><strong>Center </strong>
<br>All
<br>Purple
<br>Harmony
</td>
<td class="e"><strong>East </strong>
<br>Wood
<br>Blue
<br>Future
</td>
</tr>
<tr>
<td class="sw"><strong>Southwest </strong>
<br>Earth
<br>Brown
<br>Tranquility
</td>
<td class="s"><strong>South </strong>
<br>Fire
<br>Orange
<br>Fame
</td>
<td class="se"><strong>Southeast </strong>
<br>Wood
<br>Green
<br>Romance
</td>
</table>
<script>
let table = document.getElementById('bagua-table');
let selectedTd;
table.onclick = function(event) {
let target = event.target;
while(target != this) {//???
if(target.tagName != 'TD') {
highlight(target);
return;
}
target = target.parentNode;
}
}
function highlight(node){
if(selectedTd) {
selectedTd.classList.remove('highlight');
}
selectedTd = node;
selectedTd.classList.add('highlight');
}
</script>
</body>
</HTML>
<body>
<link type="text/css" rel="stylesheet" href="bagua.css">
<table id="bagua-table">
<tr>
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
</tr>
<tr>
<td class="nw"><strong>Northwest</strong>
<br>Metal
<br>Silver
<br>Elders
</td>
<td class="n"><strong>North</strong>
<br>Water
<br>Blue
<br>Change
</td>
<td class="ne"><strong>Northeast</strong>
<br>Earth
<br>Yellow
<br>Direction
</td>
</tr>
<tr>
<td class="w"><strong>West </strong>
<br>Metal
<br>Gold
<br>Youth
</td>
<td class="c"><strong>Center </strong>
<br>All
<br>Purple
<br>Harmony
</td>
<td class="e"><strong>East </strong>
<br>Wood
<br>Blue
<br>Future
</td>
</tr>
<tr>
<td class="sw"><strong>Southwest </strong>
<br>Earth
<br>Brown
<br>Tranquility
</td>
<td class="s"><strong>South </strong>
<br>Fire
<br>Orange
<br>Fame
</td>
<td class="se"><strong>Southeast </strong>
<br>Wood
<br>Green
<br>Romance
</td>
</table>
<script>
let table = document.getElementById('bagua-table');
let selectedTd;
table.onclick = function(event) {
let target = event.target;
while(target != this) {//???
if(target.tagName != 'TD') {
highlight(target);
return;
}
target = target.parentNode;
}
}
function highlight(node){
if(selectedTd) {
selectedTd.classList.remove('highlight');
}
selectedTd = node;
selectedTd.classList.add('highlight');
}
</script>
</body>
</HTML>
댓글
댓글 쓰기