event delegation

<!DOCTYPE HTML>
<html>

<body>
  <style>
	#bagua-table th {
	  text-align: center;
	  font-weight: bold;
	}

	#bagua-table td {
	  width: 150px;
	  white-space: nowrap;
	  text-align: center;
	  vertical-align: bottom;
	  padding-top: 5px;
	  padding-bottom: 12px;
	}

	#bagua-table .nw {
	  background: #999;
	}

	#bagua-table .n {
	  background: #03f;
	  color: #fff;
	}

	#bagua-table .ne {
	  background: #ff6;
	}

	#bagua-table .w {
	  background: #ff0;
	}

	#bagua-table .c {
	  background: #60c;
	  color: #fff;
	}

	#bagua-table .e {
	  background: #09f;
	  color: #fff;
	}

	#bagua-table .sw {
	  background: #963;
	  color: #fff;
	}

	#bagua-table .s {
	  background: #f60;
	  color: #fff;
	}

	#bagua-table .se {
	  background: #0c3;
	  color: #fff;
	}

	#bagua-table .highlight {
	  background: red;
	}
  </style>


  <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>
    </tr>

  </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>